如何在單擊父復選框時取消選中子復選框-有解無憂

您好，我需要在單擊父復選框上選中和取消選中子復選框，現在我可以選中子復選框但無法通過單擊相同的方式取消選中這些復選框，如何實作這一點。

我的代碼

HTML

 <ul class="theme-list-p">
                          <li>
                            <input type="checkbox" name="">&nbsp;&nbsp;Ambah
                            <ul >
                              <li><input type="checkbox" name="">&nbsp;&nbsp;Kirnapur</li>
                              <li><input type="checkbox" name="">&nbsp;&nbsp;Barwani</li>
                              <li><input type="checkbox" name="">&nbsp;&nbsp;Sihora</li>
                            </ul>
                          </li>
                          <li><input type="checkbox" name="">&nbsp;&nbsp;Sabalgarh
                            <ul >
                              <li><input type="checkbox" name="">&nbsp;&nbsp;Village1</li>
                              <li><input type="checkbox" name="">&nbsp;&nbsp;Village2</li>
                              <li><input type="checkbox" name="">&nbsp;&nbsp;Village3</li>
                            </ul>
                          </li>
                          <li><input type="checkbox" name="">&nbsp;&nbsp;Kailaras</li>
                        </ul>

CSS

. 主題串列-p{

  list-style: none;
  padding-left: 10px;
  font-weight: bold;
  border:1px solid #dee2e6;
  padding: 5px;
  overflow-y: scroll;
  min-height: 120px;
}

.theme-list-c{
  list-style: none;
  padding-left: 20px;
  font-weight: 400;
}

jQuery

<script type="text/javascript">
  $(document).on('change', '.theme-list-p li', function(){
     $(this).find('.theme-list-c li input').attr('checked', true);
  });
</script>

uj5u.com熱心網友回復：

你可以這樣做：

$(document).on('change', '.theme-list-p li input', function() {
  $(this).next('.theme-list-c').find('li input').attr('checked', $(this).is(":checked"));
});

演示

顯示代碼片段

$(document).on('change', '.theme-list-p li input', function() {
  $(this).next('.theme-list-c').find('li input').attr('checked', $(this).is(":checked"));
});

.theme-list-p {
  list-style: none;
  padding-left: 10px;
  font-weight: bold;
  border: 1px solid #dee2e6;
  padding: 5px;
  overflow-y: scroll;
  min-height: 120px;
}

.theme-list-c {
  list-style: none;
  padding-left: 20px;
  font-weight: 400;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="theme-list-p">
  <li>
    <input type="checkbox" name="">&nbsp;&nbsp;Ambah
    <ul class="theme-list-c">
      <li><input type="checkbox" name="">&nbsp;&nbsp;Kirnapur</li>
      <li><input type="checkbox" name="">&nbsp;&nbsp;Barwani</li>
      <li><input type="checkbox" name="">&nbsp;&nbsp;Sihora</li>
    </ul>
  </li>
  <li><input type="checkbox" name="">&nbsp;&nbsp;Sabalgarh
    <ul class="theme-list-c">
      <li><input type="checkbox" name="">&nbsp;&nbsp;Village1</li>
      <li><input type="checkbox" name="">&nbsp;&nbsp;Village2</li>
      <li><input type="checkbox" name="">&nbsp;&nbsp;Village3</li>
    </ul>
  </li>
  <li><input type="checkbox" name="">&nbsp;&nbsp;Kailaras</li>
</ul>

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/420850.html

標籤：

上一篇：如果另一個輸入具有值，如何重置文本區域的值

下一篇：是否可以洗掉某個字符留下的整個字串