Question

我有这个脚本。一切正常，但我需要让它与多功能项目一起使用。第一组工作完美，但我可以在第二组和第三组复选框上进行复制。

$(".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>

请有人帮忙吗？

非常感谢提前。

Answer 1

删除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>");
        });
    }
});

Answer 2

以下代码段应符合您的要求。希望这会对你有所帮助。

＆＃13;

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>");
      });
    }
  })
});

＆＃13;

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

＆＃13;

使用多个实例的复选框

2 个答案: