Question

我正在处理一个jQuery输入，以便在select选项中单击选择框的所有值。当我在第一个选项后单击所有值时，除非我返回并重新单击第一个选项，否则我无法看到所选值。我想要做的就是每次点击一个选项时都这样做，它会自动显示div或输入值。此外，当未被点击时，它将被删除。

我的jQuery代码。

$(document).ready(function() {
   $("#checku").change(function() { 
        var favorite = [];
        $.each($("input[type='checkbox']:checked"),        
      function(){            
            favorite.push($(this).val());
            $("#values").val(favorite.join(", "));
        });
    });
});

我的表单HTML

<form id="formu"> 
<input type="text" id="values" name="values"> 
<ul>
  <li>Title One <input type="checkbox" id="checku" name="checku[]" value="1"></li>
  <li>Title Two <input type="checkbox" id="checku" name="checku[]" value="2"></li>
  <li>Title Three <input type="checkbox" id="checku" name="checku[]" value="3"></li>
  <li>Title Four <input type="checkbox" id="checku" name="checku[]" value="4"></li>
 <li>Title Five<input type="checkbox" id="checku" name="checku[]" value="5"></li>
 <li>Title Six <input type="checkbox" id="checku" name="checku[]" value="6"></li>
</ul>

Answer 1

首先，评论IDs应该是唯一的！

试试这个：

＆＃13;

$(document).ready(function() {
  $("input[type='checkbox']").change(function() {
    var favorite = [];
    $.each($("input[type='checkbox']:checked"),
      function() {
        favorite.push($(this).val());
        $("#values").val(favorite.join(", "));
      });
    if ($("input[type='checkbox']:checked").length == 0) {
      $("#values").val('')
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form id="formu">
  <input type="text" id="values" name="values" />
  <ul>
    <li>Title One
      <input type="checkbox" id="check1" name="checku[]" value="1" />
    </li>
    <li>Title Two
      <input type="checkbox" id="check2" name="checku[]" value="2" />
    </li>
    <li>Title Three
      <input type="checkbox" id="check3" name="checku[]" value="3" />
    </li>
    <li>Title Four
      <input type="checkbox" id="check4" name="checku[]" value="4" />
    </li>
    <li>Title Five
      <input type="checkbox" id="check5" name="checku[]" value="5" />
    </li>
    <li>Title Six
      <input type="checkbox" id="check6" name="checku[]" value="6" />
    </li>
  </ul>
</form>

＆＃13;

我将活动绑定到input。但是，如果您愿意，可以将其更改为inputs的特定组，例如将类titles添加到ul并将$('.titles input[type='checkbox']')作为选择器。

Answer 2

尝试这种方法：

使用jquery .map()

和

在DOM中ID必须是唯一的，您可以使用.class作为相同的内容。

 $(".checku").change(function() { 
     var favourite = $("input[type='checkbox']:checked").map(function(i,chk){            
         return chk.value;
     }).get().join(",");
     $("#values").val(favourite);
});

jQuery获取所选选择框的值（实时显示）

2 个答案:

Demo