How to make only one checkbox checked in multiple checkboxes based on specific parent in jquery

Question

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;
  }

Possible duplicate of make checkbox behave like radio buttons with javascript — Bryan Dellinger
– Bryan Dellinger, Commented Apr 30, 2019 at 18:42
and why not using radio buttons to do so. That is what they are meant for. — Nawed Khan
– Nawed Khan, Commented Apr 30, 2019 at 18:59

aaron lilly · Accepted Answer · 2019-05-01 12:54:39Z

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>

edited May 1, 2019 at 12:54

answered May 1, 2019 at 2:26

aaron lilly

2742 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

carreankush Over a year ago

Thanks for your answer,can we do it for checkbox with jquery

aaron lilly Over a year ago

changed to checkboxes with jquery

carreankush Over a year ago

Thanks for your answer here .p1chb this class I may not have since all the <ul></ul> are genarating dynamically in my project so there may be n number of <ul></ul>,I mean parent child,here in example its 2 but in my project its may be 3,4,5 etc depend on some API.

aaron lilly Over a year ago

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 .

carreankush Over a year ago

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

|

Collectives™ on Stack Overflow

How to make only one checkbox checked in multiple checkboxes based on specific parent in jquery

HTML

CSS

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

HTML

CSS

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related