jQuery获取选中的Selectboxes的值（实时显示）

Question

我正在处理 jQuery 输入，以获取单击 select 选项的 select 框的所有值。当我单击第一个选项后的所有值时，我无法看到 selected 值，除非我返回并重新单击第一个选项。我想要做的是让它每次单击一个选项时，它会自动显示在 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要独一无二！

试试这个：

$(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('')
    }
  });
});

<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>

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

Answer 2

试试这个方法：

使用jquery.map()

和

ID 在 DOM 中必须是唯一的，您可以使用 .class。

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

jQuery获取选中的Selectboxes的值（实时显示）

jQuery Getting Values of Selected Selectboxes (Display in real-time)

html

forms

jquery

select

options

Demo