Javascript 选中复选框时显示/隐藏复选框

我有一张表格。我有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>

问题1？
选择1
选择2
选择3

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

$（文档）.load（函数（）{
$（'#option1'）.hide（）
$（'#option2'）.hide（）
$（'#option3'）.hide（）
});
函数showOptions（）{
如果$（'#问题1'）。选中（）{
$（'#option1'）.show（）
$（'#option2'）.show（）
$（'#option3'）.show（）
}
}

---

这不管用。怎么了？谢谢

尝试将if条件更改为

if（$（'#问题1'）。is（':checked'）{

更好的方法是使用

css

隐藏所有

checkbox

及其内容，然后根据问题

checkbox

选择添加/删除类。请参见下面的代码

CSS:

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

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

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

HTML:

向所有需要隐藏的

td

复选框中添加类

<td class="hideContents">

---

尝试将if条件更改为

if（$（'#问题1'）。is（':checked'）{

更好的方法是使用

css

隐藏所有

checkbox

及其内容，然后根据问题

checkbox

选择添加/删除类。请参见下面的代码

CSS:

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

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

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

HTML:

向所有需要隐藏的

td

复选框中添加类

<td class="hideContents">

试试这个：

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

试试这个：

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

---

第一个错误是行缺少括号

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

第二,

您应该将单击或更改事件附加到复选框中

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

---

第一个错误是行缺少括号

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

第二,

您应该将单击或更改事件附加到复选框中

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

---

不确定您正在做什么，但您需要附加事件处理程序

$(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()
    }
}

您可能需要一个更通用的工具来全面实现这一点，包括稍微修改您的html：

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

没有经过测试，但我认为没问题

---

如果页面上有多个问题，请返回，我们将考虑将其限制为仅回答相关问题。

不确定您正在做什么，但您需要附加事件处理程序

$(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()
    }
}

您可能需要一个更通用的工具来全面实现这一点，包括稍微修改您的html：

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

没有经过测试，但我认为没问题

---

如果一个页面上有多个问题，请弹回来，我们将考虑将其限制为仅回答相关问题。

脚本结束标记应该是

，而不是

，这可能会起作用。

脚本结束标记应该是

，而不是

，这可能会起作用。

$(“调查问卷1号”的问题1号“问题1号”的“问题1号”的“问题1号”选项1、选项2、选项3、选项3、选项3”的“选项1号”的“问题1号”的“问题1号”的“问题1号”的“问题1号”的“问题1号”的“问题1号”的“问题1号”选项1号，“选项2号”选项2、选项3号”的“选项3”的.切换（）；；；；；；；；；；；；；；；；或<代码>或<代码>或<代码><代码>>（（（“（“问题1问问问问问问问问问问问问问问问问问问问问问问问问：））））））））））））））））））））的（（（（（（（（（（（（（（（“）））））））））））变化（问题1号号号）的变化.change（函数（e）{$（'选项1，'选项2，'选项3'）.toggle（）；}）

或

$（“#问题1”）.change（函数（e）{if（$（this）.is（“：checked”）{$（'#option1，#option2，#option3'）。show（）；}否则{$（'#option1，#option2，#option3'）。hide（）}；