jQuery获取选定选择框的值（实时显示）答案

【问题标题】：jQuery Getting Values of Selected Selectboxes (Display in real-time)jQuery获取选定选择框的值（实时显示）
【发布时间】：2015-07-02 18:51:26
【问题描述】：

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

【问题讨论】：

更改 ID 并更改基于 ID 的 #.. 选择器。它会工作

标签： jquery html forms select options

【解决方案1】：

首先，像 cmets 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 组，例如将titles 类添加到ul 并使用$('.titles input[type='checkbox']') 作为选择器。

【讨论】：

非常感谢。必须不断提醒自己这些简单的事情！
@mahatmanich 我想它是几个月前发布的。这是一个很好的功能
@JoelAlmeida 使用上面的整洁按钮来编写漂亮的代码！ :-)

【解决方案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);
});

Demo

【讨论】：