jQuery檢查父復選框是否選中子復選框

Question

我想提出一個邏輯，如果選中了子復選框，它也會同時選中父復選框。 輸入可以是父項，子項以及兩者：

<input type="checkbox" name="checkbox[$counter]" class="parent" />
<input type="checkbox" name="checkbox[$counter]" class="child" />
<input type="checkbox" name="checkbox[$counter]" class="parent child" />

這個結構：

• 1個
  • 2
  • 3
• 4
  • 5
    • 6
    • 7

將如下所示：

<table class="table">
  <tr>
    <td>
      <input type="checkbox" name="checkbox[1]" class="parent" />
    </td>
    <td>
     .
     .
  </tr>
  <tr>
    <td>
      <input type="checkbox" name="checkbox[2]" class="child" />
    </td>
    <td>
     .
     .
  </tr>
  <tr>
    <td>
      <input type="checkbox" name="checkbox[3]" class="child" />
    </td>
    <td>
     .
     .
  </tr>
  <tr>
    <td>
      <input type="checkbox" name="checkbox[4]" class="parent" />
    </td>
    <td>
     .
     .
  </tr>
  <tr>
    <td>
      <input type="checkbox" name="checkbox[5]" class="child parent" />
    </td>
    <td>
     .
     .
  </tr>
  <tr>
    <td>
      <input type="checkbox" name="checkbox[6]" class="child" />
    </td>
    <td>
     .
     .
  </tr>
  <tr>
    <td>
      <input type="checkbox" name="checkbox[7]" class="child" />
    </td>
    <td>
     .
     .
  </tr>
</table>

我要檢查3，檢查1，如果檢查6，檢查5和4。

復選框也位於單獨的表行中，因為我想在復選框旁邊顯示一些結構化的信息。

你能告訴我一個劇本是什么嗎？ 我試過了，但是沒有用：

$(document).ready(function() {
    $('input.child').change(function() {
        if ($(this).is(':checked')) {
            $(this).closest('input.parent:checkbox').attr('checked', true);
        }
    });
});

Answer 1

復選框不是父子關系，因此.closest()方法將無法運行，因為它是從自身開始遍歷的。

我建議您為類分配TR元素，並為其附加事件處理程序，遍歷DOM會很容易。

<tr class="parent">...</tr>
<tr class="child">...</tr>

你可以使用組合.prevAll()和.first()來獲得有針對性的TR ，然后使用.find()來獲得的復選框。

此外，如果要trigger()更改事件，則可以使用trigger()方法。

 $(document).ready(function() { $('.child').on('change', ':checkbox', function() { if ($(this).is(':checked')) { var currentRow = $(this).closest('tr'); var targetedRow = currentRow.prevAll('.parent').first(); var targetedCheckbox = targetedRow.find(':checkbox'); targetedCheckbox.prop('checked', true).trigger('change'); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="table"> <tr class="parent"> <td> <input type="checkbox" name="checkbox[1]" /> </td> </tr> <tr class="child"> <td> <input type="checkbox" name="checkbox[2]" /> </td> </tr> <tr class="child"> <td> <input type="checkbox" name="checkbox[3]" /> </td> </tr> <tr class="parent"> <td> <input type="checkbox" name="checkbox[4]" /> </td> </tr> <tr class="child parent"> <td> <input type="checkbox" name="checkbox[5]" /> </td> </tr> <tr class="child"> <td> <input type="checkbox" name="checkbox[6]" /> </td> </tr> <tr class="child"> <td> <input type="checkbox" name="checkbox[7]" /> </td> </tr> </table> 

Answer 2

試試下面的腳本，

$(document).on('change', 'input[type=checkbox]', function(e) {
  $(this).siblings('ul').find("input[type='checkbox']").prop('checked', this.checked);
  $(this).parentsUntil('input[type=checkbox]').children("input[type='checkbox']").prop('checked', this.checked);
  e.stopPropagation();
});

Answer 3

根據您目前的html結構，你需要做之間的聯系childs和parents ，例如與data屬性，現在它的工作原理與任何html結構， table ， ul li或沒有這些。

 $(document).ready(function() { $('input.child').on('change', function() { var data = $(this).data('name'); if (this.checked) { $('input.parent:checkbox[data-name="' + data + '"]').prop('checked', true); $('input.parent:checkbox[data-parent="' + data + '"]').prop('checked', true); } else { $('input.parent:checkbox[data-name="' + data + '"]').prop('checked', false); $('input.parent:checkbox[data-parent="' + data + '"]').prop('checked', false); } }); }); /* Optional, This is what I added for better look */ $('.child').each(function() { $(this).parent().css({ paddingLeft: 20, backgroundColor: '#c0c0c0' }); }); $('.parent').each(function() { $(this).parent().css({ backgroundColor: 'black' }); }); 

 td { border: 1px solid black; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="table"> <tr> <td> <input type="checkbox" name="checkbox[1]" class="parent" data-name="chck-1" /> </td> <td> </tr> <tr> <td> <input type="checkbox" name="checkbox[2]" class="child" data-name="chck-1" /> </td> <td> </tr> <tr> <td> <input type="checkbox" name="checkbox[3]" class="child" data-name="chck-1" /> </td> <td> </tr> <tr> <td> <input type="checkbox" name="checkbox[4]" class="parent" data-name="chck-2" /> </td> <td> </tr> <tr> <td> <input type="checkbox" name="checkbox[5]" class="child parent" data-name="chck-2" data-parent="chck-3" /> </td> <td> </tr> <tr> <td> <input type="checkbox" name="checkbox[6]" class="child" data-name="chck-3" /> </td> <td> </tr> <tr> <td> <input type="checkbox" name="checkbox[7]" class="child" data-name="chck-3" /> </td> <td> </tr> </table>