Question

基本上我正在尝试编写一个js func，如果我检查一个子复选框，则父复选框也会检查，如果尚未检查。我在这里使用jquery是我的HTML：

<div class="checkboxes right">
<label for="enablenotice"><input type="checkbox" id="enablenotice">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده  </label>
<div class="child"><label for="enablenotice"><input type="checkbox" id="enablenotice">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده</label>
<label for="enablenotice"><input type="checkbox" id="enablenotice">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده</label>
<label for="enablenotice"><input type="checkbox" id="enablenotice">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده</label>
<label for="enablenotice"><input type="checkbox" id="enablenotice">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده</label>
<label for="enablenotice"><input type="checkbox" id="enablenotice">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده</label>
</div>
</div>
<div class="sepp"></div>
<div class="checkboxes left">
<label for="enablenotice"><input type="checkbox" id="enablenotice">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده</label>
<div class="child"><label for="enablenotice"><input type="checkbox" id="enablenotice">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده</label>
<label for="enablenotice"><input type="checkbox" id="enablenotice">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده</label>
<label for="enablenotice"><input type="checkbox" id="enablenotice">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده</label>
<label for="enablenotice"><input type="checkbox" id="enablenotice">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده</label>
<label for="enablenotice"><input type="checkbox" id="enablenotice">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده</label>
</div>
</div>

  <script>
        $(document).ready(function() {
$('.child input').change(function() {
    if ($(this).is(':checked')) {
        $(this).closest('ul').siblings('input:checkbox').attr('checked', true);
    }
});
    });
        </script>

Answer 1

使用.prop代替.attr进行选中/停用。请参阅prop documentation。

然后id 必须在HTML页面中是唯一的，很多事情都不会起作用。

没有ul有你祖先的输入。

Answer 2

您只需遍历DOM即可转到“父”复选框。提升两级父母将带您到<div class="child">，.prev()将选择div前的标签。最后，.find("input")将找到父label的输入元素。

我必须删除for属性，因为它们导致了问题（在这种情况下并不是必需的），并且拥有一堆相同的id s也不好。

$(document).ready(function() {
    $('.child input').change(function() {
        if ($(this).is(':checked')) {
            $(this).parent().parent().prev().find("input").prop('checked', true);
        }
    });
});

div.child {
  padding-left: 2em;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="checkboxes right">
    <label><input type="checkbox">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده  </label>
    <div class="child">
        <label><input type="checkbox">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده</label><br>
        <label><input type="checkbox">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده</label><br>
        <label><input type="checkbox">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده</label><br>
        <label><input type="checkbox">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده</label><br>
        <label><input type="checkbox">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده</label><br>
    </div>
</div>
<div class="sepp"></div>
<div class="checkboxes left">
    <label><input type="checkbox">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده</label>
    <div class="child">
        <label><input type="checkbox">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده</label><br>
        <label><input type="checkbox">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده</label><br>
        <label><input type="checkbox">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده</label><br>
        <label><input type="checkbox">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده</label><br>
        <label><input type="checkbox">اطلاع رسانی ها را از طریق ایمیلم اطلاع بده</label>
    </div>
</div>

选中父复选框。 jQuery的

2 个答案: