使用複選框的多個實例

我有這個腳本。一切都在工作，除了我需要使它與多能物品一起工作。第一組作品完美無缺，但我可以在第二組和第三組複選框上進行復制。使用複選框的多個實例

$(".checkall").on('change', function() 
 
    { 
 

 
     // all normal checkboxes will have a class "chk_xxxxxx" 
 
     // where "xxxx" is the name of the location, e.g. "chk_wales" 
 

 
     // get the class name from the id of the "check all" box 
 
     var checkboxesClass = '.chk_' + $(this).attr("id"); 
 

 
     // now get all boxes to check 
 
     var boxesToCheck = $(checkboxesClass); 
 

 
     // check all the boxes 
 
     boxesToCheck.prop('checked', this.checked); 
 
    }); 
 

 
$("#check1 input[type=checkbox], #wales").on("change", function() 
 
    { 
 
     checkBoxes(); 
 
    }); 
 

 
    function checkBoxes() 
 
    { 
 

 
     $("#checked").empty(); 
 
     if($("#check1 input[type=checkbox]:checked").length == $("#check1 input[type=checkbox]").length) 
 
     { 
 

 
      $("#wales").prop("checked", true); 
 

 
      // Display the id of the "check all" box 
 
      $("#checked").html($("#checked").html() + "<h3>Wales</h3>"); 
 

 
     } 
 
     else 
 
     { 
 
      $("#wales").prop("checked", false); 
 
      $("#check1 input[type=checkbox]:checked").each(function() 
 
      { 
 
       $("#checked").html($("#checked").html() + $(this).next().text() + "<br>"); 
 
      }); 
 
     } 
 
    }

<!DOCTYPE html> 
 
<html> 
 
<head> 
 

 
    <meta charset="utf-8"> 
 
    <title>Test</title> 
 
</head> 
 
<body> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<!-- <input type="checkbox" id="wales" class="checkall" value="1"> 
 
    <label for="wales" >Check All</label> 
 
    <input type="checkbox" id="checkItem1" value="2" class="chk_wales"> 
 
    <label for="checkItem1" >Item 1</label> 
 
    <input type="checkbox" id="checkItem2" value="2" class="chk_wales"> 
 
    <label for="checkItem2" >Item 2</label> 
 
    <input type="checkbox" id="checkItem3" value="2" class="chk_wales"> 
 
    <label for="checkItem3" >Item 3</label>--> 
 

 
    <hr /> 
 
    <input type="checkbox" id="wales" class="checkall" value="1"> 
 
<label for="wales">Check All</label> 
 
<section id="check1"> 
 
    <input type="checkbox" id="checkItem1" value="2" class="chk_wales"> 
 
    <label for="checkItem1">Item 1</label> 
 
    <input type="checkbox" id="checkItem2" value="2" class="chk_wales"> 
 
    <label for="checkItem2">Item 2</label> 
 
    <input type="checkbox" id="checkItem3" value="2" class="chk_wales"> 
 
    <label for="checkItem3">Item 3</label> 
 
</section> 
 

 
    <hr /> 
 
    <input type="checkbox" id="west" class="checkall" value="3"> 
 
    <label for="west">Check All</label> 
 
    <section id="check2"> 
 
    <input type="checkbox" id="checkItem4" value="4" class="chk_west"> 
 
    <label for="checkItem4">Item 1</label> 
 
    <input type="checkbox" id="checkItem5" value="4" class="chk_west"> 
 
    <label for="checkItem5">Item 2</label> 
 
    <input type="checkbox" id="checkItem6" value="4" class="chk_west"> 
 
    <label for="checkItem6">Item 3</label> 
 
    </section> 
 
    <hr /> 
 

 
    <input type="checkbox" id="east" class="checkall" value="5"> 
 
    <label for="east">Check All</label> 
 
    <section id="check3"> 
 
     <input type="checkbox" id="checkItem7" value="6" class="chk_east"> 
 
     <label for="checkItem7">Item 1</label> 
 
     <input type="checkbox" id="checkItem8" value="6" class="chk_east"> 
 
     <label for="checkItem8">Item 2</label> 
 
     <input type="checkbox" id="checkItem9" value="6" class="chk_east"> 
 
     <label for="checkItem9">Item 3</label> 
 
    </section> 
 
<p>You have selected:</p> 
 

 
<div id="checked"> 
 

 
</div> 
 

 
</body> 
 
</html>

請誰能幫助？

非常感謝提前。

來源

2015-12-21 Daniel Edwards

好像你有你的ID –

刪除checkBoxes()方法並替換最後一個事件處理程序爲（檢查這個fiddle）

//put the event handler directly on the checkboxes inside the section 
$("section input[type='checkbox']").on("change", function() 
{ 
    console.log($(this)); 
    //get the handle to the parent section 
    var $parentSection = $(this).parent(); 
    //compare the number of checked checkboxes with total one 
    if($parentSection.find("input[type='checkbox']:checked").length == $parentSection.find("input[type=checkbox]").length) 
    { 
     $parentSection.prev().prev().prop("checked", true); 
     //write checkall's textbox id 
     $("#checked").append("<h3>" + $parentSection.prev().prev().attr("id") + "</h3>"); 
    } 
    else 
    { 
     $parentSection.prev().prev().prop("checked", false); 
     //write each and every checked box's text 
     $parentSection.find("input[type='checkbox']:checked").each(function() 
     { 
      $("#checked").html($("#checked").html() + $(this).next().text() + "<br>"); 
     }); 
    } 
});

來源

2015-12-21 12:12:00 gurvinder372

解釋你的代碼中的問題。這對於OP來說並不是很清楚。 –

@KeesSonnema完成，讓我知道是否需要其他任何東西 – gurvinder372

現在好了:)（我確實瞭解它，但請確保您爲OP添加註釋） –

下面的代碼片段應滿足您的要求。希望這會幫助你。

var checkedDiv = $("#checked"); 
 

 
$('input[type=checkbox]').on('change', function() { 
 
    if (this.className == 'checkall') { 
 
    var section = $(this).nextAll('section:first'); 
 
    section.find('input[type=checkbox]').prop('checked', this.checked); 
 
    } else { 
 
    var parentSection = $(this).parent(); 
 
    var checkall = parentSection.prevAll(".checkall:first") 
 
    var isEqual = parentSection.find("input[type=checkbox]:checked").length == parentSection.find("input[type=checkbox]").length; 
 
    checkall.prop("checked", isEqual); 
 
    } 
 

 
    checkedDiv.html(''); 
 

 
    $('.checkall').each(function() { 
 
    if (this.checked) { 
 
     checkedDiv.append('<h3>' + this.id + '</h3><br/>'); 
 
    } else { 
 
     var section = $(this).nextAll('section:first'); 
 
     section.find("input[type=checkbox]:checked").each(function() { 
 
     checkedDiv.append($(this).next().text() + "<br>"); 
 
     }); 
 
    } 
 
    }) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="checkbox" id="wales" class="checkall" value="1"> 
 
<label for="wales">Check All</label> 
 
<section id="check1"> 
 
    <input type="checkbox" id="checkItem1" value="2" class="chk_wales"> 
 
    <label for="checkItem1">Item 1</label> 
 
    <input type="checkbox" id="checkItem2" value="2" class="chk_wales"> 
 
    <label for="checkItem2">Item 2</label> 
 
    <input type="checkbox" id="checkItem3" value="2" class="chk_wales"> 
 
    <label for="checkItem3">Item 3</label> 
 
</section> 
 

 
<hr /> 
 
<input type="checkbox" id="west" class="checkall" value="3"> 
 
<label for="west">Check All</label> 
 
<section id="check2"> 
 
    <input type="checkbox" id="checkItem4" value="4" class="chk_west"> 
 
    <label for="checkItem4">Item 1</label> 
 
    <input type="checkbox" id="checkItem5" value="4" class="chk_west"> 
 
    <label for="checkItem5">Item 2</label> 
 
    <input type="checkbox" id="checkItem6" value="4" class="chk_west"> 
 
    <label for="checkItem6">Item 3</label> 
 
</section> 
 
<hr /> 
 

 
<input type="checkbox" id="east" class="checkall" value="5"> 
 
<label for="east">Check All</label> 
 
<section id="check3"> 
 
    <input type="checkbox" id="checkItem7" value="6" class="chk_east"> 
 
    <label for="checkItem7">Item 1</label> 
 
    <input type="checkbox" id="checkItem8" value="6" class="chk_east"> 
 
    <label for="checkItem8">Item 2</label> 
 
    <input type="checkbox" id="checkItem9" value="6" class="chk_east"> 
 
    <label for="checkItem9">Item 3</label> 
 
</section> 
 

 
<p>You have selected:</p> 
 
<div id="checked"></div>

來源

2015-12-21 19:12:58 Azim

啊關閉但不完全，例如我需要威爾士標記消失時，如果其中一個項目是未選中，但如果所有的項目都檢查，然後只是威爾士顯示像這樣：https：//jsbin.com/rucemacigu/1 /編輯？HTML，JS，輸出 –

使用複選框的多個實例

回答

相關問題