选中复选框时添加字符串答案

【问题标题】：add string when checkbox ischecked选中复选框时添加字符串
【发布时间】：2018-11-18 02:14:05
【问题描述】：

我在页面上有复选框。我想要做的是当用户点击复选框时，它的值将打印在表格下方。可以一行打印多个值，用','分隔：像这样

a,b,c,d

function gant(id) {
  var arr = []
  $('#pil_' + id).each(function() {
    if ($(this).is(":checked")) {
      arr.push($(this).val())
    }
  })
  var vals = arr.join("+");
  var str = vals;
  $("#val").text(str);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><input type="checkbox" name="selected" id="pil_1" onchange="gant(1)" value="a" />a</label>
<label><input type="checkbox" name="selected" id="pil_2" onchange="gant(2)" value="b"/>b</label>
<label><input type="checkbox" name="selected" id="pil_3" onchange="gant(3)" value="c" />c</label>
<label><input type="checkbox" name="selected" id="pil_4" onchange="gant(4)" value="d"/>d</label>
<div id="val"></div>

但它只显示 a 或 b 或 c 或 d

【问题讨论】：

标签： jquery html arrays

【解决方案1】：

只有一个 id 传递给函数，所以循环遍历类。

$('.offers:checked').each(function(){
     arr.push($(this).val());          
})

【讨论】：

为什么......它不起作用？自己测试是一个很小的变化

【解决方案2】：

以下应该可以工作

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function gant(id) {

var arr = [];
  $(':checkbox[name="selected"]').each(function() {
    if ($(this).is(":checked")) {
        arr.push($(this).val())
    }

  })
  //alert(arr);
  var vals = arr.join(",");
  var str = vals ;
  $("#val").text(str);
}
</script>
</head>
<body>

<label><input type="checkbox" name="selected" id="pil_1" onchange="gant(1)" value="a" />a</label>
<label><input type="checkbox" name="selected" id="pil_2" onchange="gant(2)" value="b"/>b</label>
<label><input type="checkbox" name="selected" id="pil_3" onchange="gant(3)" value="c" />c</label>
<label><input type="checkbox" name="selected" id="pil_4" onchange="gant(4)" value="d"/>d</label>
<div id="val"></div>
</body>
</html>

【讨论】：

【解决方案3】：

只需将 id 选择器更改为这样的类：

function gant(id){
            var arr = [];
            $('.offers').each(function(){
                if($(this).is(":checked")){
                    arr.push($(this).val())
                }
            })
            var vals = arr.join(",");
            var str = vals;
            $("#val").text(str);
            }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<label><input type="checkbox" name="selected1" id="pil_1" onChange="gant(1)" value="a" class="offers" />a</label>
        <label><input type="checkbox" name="selected2" id="pil_2" onChange="gant(2)" value="b" class="offers" />b</label>
        <label><input type="checkbox" name="selected3" id="pil_3" onChange="gant(3)" value="c" class="offers" />c</label>
        <label><input type="checkbox" name="selected4" id="pil_4" onChange="gant(4)" value="d" class="offers" />d</label>
        <br>
        <label id="val"></label>

【讨论】：