檢查選中了哪個復選框

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

        }
    }