Show/hide check boxes on checking a check box

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

Answer 2

脚本结束标记应为</script>而不是< /script>这可能有效。

Answer 3

Try this:

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

Answer 4

first error is that line is missing parentheses.

if $('#question1').checked() {

second,

you should append a click or change event to the checkbox.

$("#question1").on("click",function(){
    if($(this).checked()){
        $('#option1').show();
        $('#option2').show();
        $('#option3').show();
    }else{
        $('#option1').hide();
        $('#option2').hide();
        $('#option3').hide();
    }       
});

Answer 5

Not sure exactly what you are doing but you need to attach event handlers...

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

    $('#question1').click(function(){ showOptions(); });
});

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

You might want a more generic tool to achieve across the board this would involve amending your html a little:

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

And some code:

$(function(){
    var $answers = $('.answer').parent();
    $answers.hide();

    $("table").on('click',$('input.question'),function(){
        if ( $(this).is(':checked') ) {
            $answers.show();
        }else{
            $answers.hide();
        }
    });
});

not tested but reckon thats ok.

IF you have more than one question on a page then pop back and we'll look at restricting it to answers to just the relevant questions.