时间戳

首页 > 解决方案 > 如何根据jquery中的特定父级在多个复选框中仅选中一个复选框

java - 如何根据jquery中的特定父级在多个复选框中仅选中一个复选框

问题描述

在这里，我有一些checkboxes其结构类似于父级和子级的结构。这里我只能基于父级选中一个复选框，假设Parent1我在选中Child11时再次选中Child12，Child11应该类似于单选按钮取消选中。

同样的事情应该发生Parent2，但如果我check/uncheck有任何孩子在Parent2，孩子们的不parent1应该打扰。

谁能帮帮我，这是下面的代码

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="details">
<ul>
<li>Parent1</li>
<li>
<ul>
<li><input type="checkbox"><span>Child11</span></li>
<li><input type="checkbox"><span>Child12</span></li>
</ul>
</li>
</ul>

<ul>
<li>Parent2</li>
<li>
<ul>
<li><input type="checkbox"><span>Child21</span></li>
<li><input type="checkbox"><span>Child22</span></li>
<li><input type="checkbox"><span>Child23</span></li>
</ul>
</li>
</ul>
</div>

CSS

ul li{
  list-style-type:none;
  }

标签： javajqueryhtml

解决方案

$(".p1chb").change(function()
                                  {
                                      $(".p1chb").prop('checked',false);
                                      $(this).prop('checked',true);
                                  });
                                  
                                  ///above for parent 1, below for parent 2.
 $(".p2chb").change(function()
                                  {
                                      $(".p2chb").prop('checked',false);
                                      $(this).prop('checked',true);
                                  });
                                  
ul li{
  list-style-type:none;
  }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="details">
<ul>
<li>Parent1</li>
<li>
<ul>
<li><input type="checkbox" id="Child11" name="Parent1" value="Child11" class="p1chb"
         checked>
  <label for="Child11">Child11</li>
<li><input type="checkbox" id="Child12" name="Parent1" value="Child12" class="p1chb"
         unchecked>
  <label for="Child12">Child12</label></li>
</ul>
</li>
</ul>

<ul>
<li>Parent2</li>
<li>
<ul>
<li><input type="checkbox" id="Child21" name="Parent2" value="Child21" class="p2chb"
         checked>
  <label for="Child21">Child21</label></li>
<li><input type="checkbox" id="Child22" name="Parent2" value="Child22" class="p2chb"
         unchecked>
  <label for="Child21">Child22</label></li>
<li><input type="checkbox" id="Child23" name="Parent2" value="Child23" class="p2chb"
         unchecked>
  <label for="Child23">Child23</label></li>
</ul>
</li>
</ul>
</div>

<div>

推荐阅读