将复选框值获取到类似内容的 div 中答案

【问题标题】：Get checkbox value into a div like content将复选框值获取到类似内容的 div 中
【发布时间】：2015-08-21 18:52:59
【问题描述】：

我在这里找到了这段代码...不是在警报上显示值，而是如何在 div 上显示它们，比如文本内容？

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("button").click(function(){
        var favorite = [];
        $.each($("input[name='sport']:checked"), function(){            
            favorite.push($(this).val());
        });
        alert("My favourite sports are: " + favorite.join(", "));
    });
});

我想在 div "checkboxvalues" 上显示值，我该怎么做？

<div id="checkboxvalues"></div>
<form>
  <h3>Select your favorite sports:</h3>
    <label><input type="checkbox" value="football" name="sport"> Football</label>
    <label><input type="checkbox" value="baseball" name="sport"> Baseball</label>
    <label><input type="checkbox" value="cricket" name="sport"> Cricket</label>
    <label><input type="checkbox" value="boxing" name="sport"> Boxing</label>
    <label><input type="checkbox" value="racing" name="sport"> Racing</label>
    <label><input type="checkbox" value="swimming" name="sport"> Swimming</label>
    <br>
    <button type="button">Get Values</button>
</form>

【问题讨论】：

标签： jquery text checkbox

【解决方案1】：

$("#checkboxvalues").html('My favourite sports are: ' + favorite.join(", "));

【讨论】：

【解决方案2】：

您可以按如下方式简化代码

$(document).ready(function() {
  $("button").click(function() {
    $('#display').html($("input[name='sport']:checked").map(function() { return this.value; }).get().join());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="checkboxvalues"></div>
<form>
  <h3>Select your favorite sports:</h3>
  <label>
    <input type="checkbox" value="football" name="sport">Football</label>
  <label>
    <input type="checkbox" value="baseball" name="sport">Baseball</label>
  <label>
    <input type="checkbox" value="cricket" name="sport">Cricket</label>
  <label>
    <input type="checkbox" value="boxing" name="sport">Boxing</label>
  <label>
    <input type="checkbox" value="racing" name="sport">Racing</label>
  <label>
    <input type="checkbox" value="swimming" name="sport">Swimming</label>
  <br>
  <button type="button">Get Values</button>
</form>
<div id=display></div>

【讨论】：