Question

我有一个像这样的复选框列表：

<input type='checkbox' name='cat' class='parent' value='cat1' />Category 1</input>
<input type='checkbox' name='foo' class='child' value='1' />SubCategory 1</input>
<input type='checkbox' name='foo' class='child' value='1' />SubCategory 2</input>

<input type='checkbox' name='cat' class='parent' value='cat2' />Category 2</input>
<input type='checkbox' name='foo' class='child' value='3' />SubCategory 3</input>
<input type='checkbox' name='foo' class='child' value='4' />SubCategory 4</input>

我想更改“类别1”复选框，以便在我点击其子类别而不选中其他类别复选框时进行检查。

我该怎么做？

Answer 1

使用data属性设置cat。只需获取子元素的检查事件：

    <input type='checkbox' name='cat' class='parent' value='cat1' id="category1" />Category 1</input>
        <input type='checkbox' name='foo' class='child' value='1' data-cat="1" />SubCategory 1</input>
        <input type='checkbox' name='foo' class='child' value='2' data-cat="1" />SubCategory 2</input>

...

    $('.child').change(function() {
       var cat = $(this).data('cat');
       $('#category' + cat).prop('checked', true);
    });

Answer 2

我对你的标记做了一些改动，并将每个集合包装在一个div中。

现在我的代码也将取消选中父级，如果所有的子猫都未选中，当你检查父级时，所有的小猫都会被选中/取消选中

Live Demo

$(function() {
  $(".child").on("click",function() {
      $parent = $(this).prevAll(".parent");
      if ($(this).is(":checked")) $parent.prop("checked",true);
      else {
         var len = $(this).parent().find(".child:checked").length;
         $parent.prop("checked",len>0);
      }    
  });
  $(".parent").on("click",function() {
      $(this).parent().find(".child").prop("checked",this.checked);
  });
});

Answer 3

您可以将子类别标识为cat2_1，cat2_2等，然后通过子类别元素通过_拆分ID来访问category元素，以获取类别ID。

Answer 4

其他答案

$(document).ready(function () {
                $("INPUT").click(function () {              
                    if ($(this).attr("class") == "parent") {
                        var v = this.value;             
                        var check = this.checked;
                        var ok = false;

                        $("INPUT").each(function () {
                            if (v == this.value) {  
                                ok = true;
                            } else {                                
                                if (this.name=="cat") ok = false;
                                else if (ok && this.name == "foo") {
                                    this.checked=check;
                                }
                            }

                        });

                    }


                });
            });

单击其他复选框时，Jquery更改复选框

4 个答案: