Make a checkbox unchecked when it is hidden using JavaScript

Question

I have a JavaScript function in place for a multiple choice quiz:

If the answer is 'Yes' - (checked by a checkbox) - Then a sub-question will appear, but if the user clicks 'No' the sub-question won't appear.

JavaScript

   $(document).ready(function() {
  var par = $('#SQ1');
  $(par).hide();

  $('#Q1').click(function(e) {
      $(par).slideToggle('slow');

  });
});

    $(document).ready(function(){
      $('#Q1NO').click(function(){
         $('#SQ1').hide('slow');
      });
   })

Questions checkboxes

<div>
    <input type="checkbox" id="Q1" name="chk[]" value="Yes">&nbsp;Yes</input>
<br>
    <input type="checkbox" id="Q1NO" name="chk[]" value="No">&nbsp;No</input>
</div>

Sub-Question checkboxes

  <div id="SQ1">
<div>
    <input type="checkbox" name="chk[]" value="Yes 2" id="Q1R">&nbsp;Yes</input>
<br>
    <input type="checkbox" name="chk[]" value="No 2">&nbsp;No</input>
</div>
</div>

I am inputting the values from the checkboxes into a database and the problem is that if the user clicked 'Yes' and then selected a box from the sub-question, but then changed their mind and clicked 'No' on the primary question, the sub-question will disappear, but the box is still checked inside it and it gets added to the database - Which I don't want.

Is there a way to uncheck an item within a div, on the click of the 'No' from the first div?

Thanks for reading

I'm guessing your code isn't complete, as I don't see an #SQ1 in your markup. Also, I'm guessing you should be using radio buttons not checkboxes for your use case... — Jeff
– Jeff, Commented Dec 9, 2015 at 13:58
I have some JQuery in place so only one checkbox can be selected at once, I didn't want to use radio buttons. I forgot to copy the SQ1 over, check my edit above — dev_py_uk
– dev_py_uk, Commented Dec 9, 2015 at 14:03

Roger Barreto · Accepted Answer · 2015-12-09 14:21:47Z

2

Uncheck all subquestions checkboxes:

$('#Q1NO').click(function(){
     $('#SQ1').hide('slow')
     .find('input:checkbox').prop('checked',false);
});

edited Dec 9, 2015 at 14:21

answered Dec 9, 2015 at 14:10

Roger Barreto

2,2841 gold badge19 silver badges24 bronze badges

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

Comments

Sam4Code · Accepted Answer · 2015-12-09 14:08:42Z

2

First of all there either should be radio button for Yes/no or only one checkbox. There are several ways to achieve your requirement. I have posted below easiest one. See if it helps.

function showHideSub(isChecked){

if(isChecked)
{
$("#sub").show()
}
else
{
$("#sub").hide()
$("#sub input[type=checkbox]").removeAttr("checked");

}

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div>
    <input type="checkbox" id="Q1" name="chk[]" onclick="showHideSub(this.checked)" value="Yes">&nbsp;Yes / No </input>
<br>
   
</div>


<div id="sub" style="display:none">
    <input type="checkbox" name="chk[]" value="Yes 2" id="Q1R">&nbsp;Yes/No</input>

</div>

answered Dec 9, 2015 at 14:08

Sam4Code

5515 silver badges9 bronze badges

4 Comments

dev_py_uk Over a year ago

How could this possibly insert Yes or No into a database field when there is only one checkbox for two answers?

Sam4Code Over a year ago

$('#' + id).is(":checked") that gets if the checkbox is checked. if its checked then yes else no

Sam4Code Over a year ago

I don't think its good user experience to give two checkboxes for Yes & No. While designing screen generally we avoid lots of elements visible to user as an good user experience.

dev_py_uk Over a year ago

I don't think you understand what I'm implementing here, nor do I agree that it affects the user experience having two checkboxes for yes/no. Example of my form: Have you been to France? - Yes --- No (Yes is ticked) Did you enjoy it? - Yes --- No

gotomanners · Accepted Answer · 2015-12-09 14:16:40Z

1

Solution without loop as you can set properties on all query matches.

 $('#Q1NO').click(function() {
    par.hide('slow');
    par.find("input[type=checkbox]").prop('checked', false);
  });

answered Dec 9, 2015 at 14:16

gotomanners

7,9461 gold badge27 silver badges39 bronze badges

Collectives™ on Stack Overflow

Make a checkbox unchecked when it is hidden using JavaScript

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related