检查选中了哪个复选框

Question

我正在使用http://www.1stwebdesigns.com/blog/development/multiple-select-with-checkboxes-and-jquery中所述的复选框和jQuery实现多选

这是网站上显示的示例：

<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

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

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

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

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

        }
    }