Question

我正在使用http://www.1stwebdesigns.com/blog/development/multiple-select-with-checkboxes-and-jquery

中所述的复选框和jQuery实现Multiple select

这是网站上显示的示例：

<div class="multiselect">
<label><input type="checkbox" name="option[]" value="1" />Green</label>
<label><input type="checkbox" name="option[]" value="2" />Red</label>
<label><input type="checkbox" name="option[]" value="3" />Blue</label>
<label><input type="checkbox" name="option[]" value="4" />Orange</label>
<label><input type="checkbox" name="option[]" value="5" />Purple</label>
<label><input type="checkbox" name="option[]" value="6" />Black</label>
<label><input type="checkbox" name="option[]" value="7" />White</label>

带有复选框的下拉列表按预期显示。请注意，一页显示有三个这样的列表。如何单独识别它们？

问题是我如何确定使用javascript选择了每个列表下的哪个复选框。我还需要获取所选项的值。其中哪些必须用id标记？

Answer 1

$('input[type="checkbox"]').on('change',function(){
 $(this).closest('.multiselect').find('span').empty();
 $(this).closest('.multiselect').find('input[type="checkbox"]:checked').each(function(){
     $(this).closest('.multiselect').find('span').append($(this).val()+' | ');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="multiselect">
   <label><input type="checkbox" name="option[]" value="1" />Green</label>
   <label><input type="checkbox" name="option[]" value="2" />Red</label>
   <label><input type="checkbox" name="option[]" value="3" />Blue</label>
   <label><input type="checkbox" name="option[]" value="4" />Orange</label>
   <label><input type="checkbox" name="option[]" value="5" />Purple</label>
   <label><input type="checkbox" name="option[]" value="6" />Black</label>
   <label><input type="checkbox" name="option[]" value="7" />White</label>
   <br>
   Checked values: <span></span>
</div>
<div class="multiselect">
   <label><input type="checkbox" name="option[]" value="1" />Green</label>
   <label><input type="checkbox" name="option[]" value="2" />Red</label>
   <label><input type="checkbox" name="option[]" value="3" />Blue</label>
   <label><input type="checkbox" name="option[]" value="4" />Orange</label>
   <label><input type="checkbox" name="option[]" value="5" />Purple</label>
   <label><input type="checkbox" name="option[]" value="6" />Black</label>
   <label><input type="checkbox" name="option[]" value="7" />White</label>
   <br>
   Checked values: <span></span>
</div>

Answer 2

以下是一个可以帮助您的示例：

＆＃13;

$(':checkbox').change(function(){
    var liste2 = $(':checkbox:checked').map(function() {
       return this.value;
   }).get();
   $('span').text(liste2);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="multiselect">
   <label><input type="checkbox" name="option[]" value="1" />Green</label>
   <label><input type="checkbox" name="option[]" value="2" />Red</label>
   <label><input type="checkbox" name="option[]" value="3" />Blue</label>
   <label><input type="checkbox" name="option[]" value="4" />Orange</label>
   <label><input type="checkbox" name="option[]" value="5" />Purple</label>
   <label><input type="checkbox" name="option[]" value="6" />Black</label>
   <label><input type="checkbox" name="option[]" value="7" />White</label>
   <br>
   Checked values: <span></span>
</div>

＆＃13;

Answer 3

您可以尝试以下操作，它会显示已选中的每个复选框的值

    function check(){

        var e = document.getElementsByClassName('check-box');
        var total = e.length;

        for (var i=0; i<total; i++){

            if (total[i].checked){  alert(total[i].value); }
            // or alert(i); if you just need the index

        }
    }

检查选中了哪个复选框

3 个答案: