Question

我在主行下面有一个主行和一些其他行，如下所示：

[checkbox]  Main heading row  
            [checkbox] first child row  
            [checkbox] second  child row

当我点击子行时，它应该自动检查父（主）行。问题是它没有在我第一次点击它时检查它。我必须首先检查第一个子行，然后取消选中第一个子行，然后再次检查第一个子行以获取父（主）行。我希望在检查任何子行时立即检查父行。

我正在使用以下代码

function checkbox_click(){

  var n = event.srcElement;
  if(n.parentElement.id == "row"){
   n = n.parentElement;
  }
  if(n.id == "row"){
   alert("ID: 1");
   n.rs = n.parentElement;
   if(this.multiSelect == 0){ // single select
    alert("ID: 2");
    n.all[0].checked = 1;
    this.selectedRows = [ n ];
    if(this.lastClicked && this.lastClicked != n){
     this.lastClicked.all[0].checked = 0;
     this.lastClicked.style.color = "000099";
     this.lastClicked.style.backgroundColor = "";
    }
   } else {
    alert("ID: 3");
    n.all[0].click();


   }
   if(this.parentElement == pg.procs) {
    alert("ID: 4");
    var terminate = false;
    var counter = 0;
   if(n.className == "proc") {
    alert("ID: 5");
     z = n.nextSibling;


     while(z.id == "row" && z.className != "proc" && !terminate) {
      alert("ID: 6");
      z.all[0].checked = 0;
      z.style.backgroundColor = z.className == "w" ? "ffffff" : "ffffcc";
      counter++;
      if(counter > 1000) terminate = true;
      z = z.nextSibling;
     }
    } else {


     $(".row input").change(function() {
      alert("ID: 7");
         var $row= $(this).closest(".row");
         var $main_row = $row.prev('.proc').length ? $row.prev('.proc') : $row.prevUntil(".proc").prev();
         $main_row.find(":checkbox").attr("checked", function(i,attr) {
             return $main_row.nextUntil('.proc').filter(':has(input:checked)').length ? "checked" : false;
         });
     });

     $(".proc input").change(function() {
      alert("ID: 8");

         $(this).closest(".proc").nextUntil('.proc').children(':checkbox').attr('checked', this.checked);
     });

    }

Answer 1

如果要在选中其中一个子复选框时检查父复选框，我建议使用子复选框的公共类，以及父复选框的唯一id属性（或将其存储为变量）。

假设您有一个结构化HTML文档，其中包含以下内容：

<div>
    <input type="checkbox" name="ckparent" id="ckparent" />
    <label for="ckparent">Parent</label>

    <div>
        <input type="checkbox" name="ckchild1" id="ckchild1" class="ckchild" />
        <label for="ckchild1">Child 1</label>
    </div>

    <div>
        <input type="checkbox" name="ckchild2" id="ckchild2" class="ckchild" />
        <label for="ckchild2">Child 2</label>
    </div>
</div>

然后，您可以编写以下jQuery代码，以便在选中其中一个子项时检查父复选框：

$('input:checkbox.ckchild').click(function(event) {
    var checked = $(this).is(':checked');

    if (checked) {
        $('#ckparent').attr('checked', true);
    }
});

编辑：关于何时实际更改选中的属性，触发更改和点击的事件的顺序取决于您使用的浏览器 - 您要定位哪些浏览器？

jQuery帮助检查已检查子项的父项复选框

1 个答案: