0

Here I have number of checkboxes whose structure are like parent and child.Here I can check only one checkbox based on parent,Suppose for Parent1 I checked Child11 again when I checked Child12,Child11 should unchecked similar to radio button.

Again same thing should be happen for Parent2,but if I check/uncheck any child in Parent2,children's of parent1 should not disturbed.

Can anyone please help me,here is the code below

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;
  }
Mohsen Shakibafar
  • 254
  • 1
  • 2
  • 15
carreankush
  • 621
  • 2
  • 9
  • 32

1 Answers1

0

$(".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>
aaron lilly
  • 274
  • 1
  • 14
  • Thanks for your answer,can we do it for checkbox with jquery – carreankush May 01 '19 at 05:12
  • changed to checkboxes with jquery – aaron lilly May 01 '19 at 12:57
  • Thanks for your answer here .p1chb this class I may not have since all the
      are genarating dynamically in my project so there may be n number of
        ,I mean parent child,here in example its 2 but in my project its may be 3,4,5 etc depend on some API.         – carreankush May 01 '19 at 17:24
      • mainly was done for example, just make sure the classes are not the same for different sections of check boxes, ie, parent 1 and parent 2 should have different class names for input . – aaron lilly May 01 '19 at 17:28
      • I got your point but even I also don't know how many parent child will be there,those will generate based on some condition.so in that case how to write script – carreankush May 01 '19 at 17:32
      • i only have a concept for how to do such a thing, it would take me hours to actually code and figure out, and it may depend on your code. To my understanding if you were pulling your parent items from an api, you could create a for loop which dynamically renders your css, adding a new class and for each item in the .length of your object. the names then would be specific to each iteration, thus would keep everything separate . good luck on that one. – aaron lilly May 03 '19 at 18:17