javascript - 在选中复选框时显示/隐藏复选框

Question

我有一个 Rails 表单。我有 4 个复选框。我想做的是，在页面加载时隐藏 3 个复选框。当选中第四个复选框时，将显示隐藏的复选框。当取消选中该复选框时，再次隐藏 3 个复选框。

这是我到目前为止所拥有的；

从rails表单生成的HTML代码:

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

还有 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>

这行不通。怎么了？谢谢

Answer 1

尝试将 if 条件更改为 if ($('#question1').is(':checked') ){

DEMO

更好的方法是使用 css 隐藏所有 checkbox 及其内容，然后根据问题 checkbox 选择添加/删除类。请参阅下面的代码，

DEMO

CSS:

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

HTML: 向所有具有需要隐藏的 checkbox 的 td 添加类。

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