Tomatron Tomatron - 3 months ago 9
jQuery Question

Hide and reveal checkbox options - Tidy up Jquery

So I am a relative novice to JS and the Jquery library. I have been playing around with something and can see it is extremely untidy, this is where I was hoping you guys could help suggest a better way of doing what I am trying to acheive.

Aim:

To have multiple checkboxes, some of which if selected reveal a sub set of checkboxes. If the parent is unchecked the children checkboxes should also become unchecked.

HTML (this is simplified)

<div class="option1">
<input type="checkbox" id="optionA" />
<div id="suboption1">
<input type="checkbox" id="optionA1" />
<input type="checkbox" id="optionA2" />
</div>
</div>

<div class="option2">
<input type="checkbox" id="optionB" />
<div id="suboption2">
<input type="checkbox" id="optionB1" />
<input type="checkbox" id="optionB2" />
</div>
</div>

<div class="option3">
<input type="checkbox" id="optionC" />
<div id="suboption3">
<input type="checkbox" id="optionC1" />
<input type="checkbox" id="optionC2" />
</div>
</div>

<!--No sub options on some-->
<div class="option4">
<input type="checkbox" id="optionD" />
</div>


JS

/*Option 1*/

$("#suboption1").hide();

$("#optionA").click(function() {
revealOptionA();
});

function revealOptionA(){
if($('#optionA').is(":checked")) {
$("#suboption1").show('hide');
} else {
$("#suboption1").hide('hide');
$("#optionA1").attr('checked', false);
$("#optionA2").attr('checked', false);
}
}
revealOptionA();

/*Option 2*/

$("#suboption2").hide();

$("#optionB").click(function() {
revealOptionB();
});

function revealOptionB(){
if($('#optionB').is(":checked")) {
$("#suboption2").show('hide');
} else {
$("#suboption2").hide('hide');
$("#optionB1").attr('checked', false);
$("#optionB2").attr('checked', false);
}
}
revealOptionB();

/*Option 3*/

$("#suboption3").hide();

$("#optionC").click(function() {
revealOptionC();
});

function revealOptionC(){
if($('#optionC').is(":checked")) {
$("#suboption3").show('hide');
} else {
$("#suboption3").hide('hide');
$("#optionC1").attr('checked', false);
$("#optionC2").attr('checked', false);
}
}
revealOptionC();


I have put together a quick JSFiddle to better demonstrate!

https://jsfiddle.net/j5pdq8p8/2/

Any advice is greatly appreciated!

Answer

I have added class for parent checkbox and the container div which have all child checkboxes. Using this way we can reduce js code.

Please check the below code.

HTML

<div class="option1">
    <input type="checkbox" id="optionA" class="parent"/>
    <div id="suboption1" class="child">
         <input type="checkbox" id="optionA1" />
          <input type="checkbox" id="optionA2" />
    </div>
</div>

<div class="option2">
    <input type="checkbox" id="optionB" class="parent"/>
    <div id="suboption2" class="child">
         <input type="checkbox" id="optionB1" />
          <input type="checkbox" id="optionB2" />
    </div>
</div>

<div class="option3">
    <input type="checkbox" id="optionC" class="parent"/>
    <div id="suboption3" class="child">
         <input type="checkbox" id="optionC1" />
          <input type="checkbox" id="optionC2" />
    </div>
</div>

<!--No sub options on some-->
<div class="option4">
    <input type="checkbox" id="optionD" />
</div>

JS

$(document).ready(function() {
$(".child").hide();
$(".parent").change(function(){
  if ($(this).prop("checked") == false) {
        $(this).parent().find(".child").find(":checkbox").each(function() {
        $(this).prop('checked', false);
    });
    $(this).parent().find(".child").hide();
  }
  else {
        $(this).parent().find(".child").show();
  }
});
});

For reference I have created this Fiddle

Comments