Question

I have a rails form. I have 4 check boxes. What I am trying to do is, hide 3 of the check boxes on page load. And when the 4th check box is checked show the hidden ones. And when the check box is unchecked, again hide the 3 check boxes.

This is what I have so far;

The HTML code generated from the rails form:

<table>
<tr>
   <td><label for="Question 1">Question 1?</label></td>
    <td><input default="false" id="question1" name="question1" onclick="showOptions()" type="checkbox" value="1"/></td>
</tr>
<tr>
   <td></td>
   <td>
      <input id="option1" name="option1" type="checkbox" value="idoption1"/>
      <label for="Option 1">Option 1</label>
   </td>
</tr>
<tr>
   <td></td>
   <td>
      <input id="option2" name="option2" type="checkbox" value="idoption2"/>
      <label for="Option 2">Option 2</label>
   </td>
</tr>
<tr>
   <td></td>
   <td>
      <input id="option3" name="option3" type="checkbox" value="idoption3"/>
      <label for="Option 3">Option 3</label>
   </td>
</tr>
</table>

And the javascript

<script type = "text/javascript" >

$(document).load(function() {
    $('#option1').hide()
    $('#option2').hide()
    $('#option3').hide()
});

function showOptions() {
    if $('#question1').checked() {
        $('#option1').show()
        $('#option2').show()
        $('#option3').show()
    }
}

< /script>

This doesn’t work. What is wrong? Thanks

Answer 1

Try changing the if condition as if ($('#question1').is(':checked') ){

DEMO

A better approach is to hide all checkbox and it contents using css and then add/remove class based on question checkbox selection. See below code,

DEMO

CSS:

.hideContents input, .hideContents label { display: none; }

HTML: Add class to all those td's that has checkbox which needs to be hidden.

<td class="hideContents">

JS:

$('#question1').on ('change', showOptions);

function showOptions() {
    if ($('#question1').is(':checked') ){
        $('.hideContents')
            .removeClass('hideContents')
            .addClass('showContents');
    } else {
        $('.showContents')
            .removeClass('showContents')
            .addClass('hideContents');
    }
}