Question

我有一个铁轨表格。我有4个复选框。我要做的是，在页面加载时隐藏3个复选框。当选中第4个复选框时，显示隐藏的复选框。如果取消选中该复选框，则再次隐藏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

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

DEMO

<强> CSS：

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

HTML:为需要隐藏td's的所有checkbox添加课程。

<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

试试这个：

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

Answer 4

第一个错误是该行缺少括号。

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

第二，

您应该在复选框中添加点击或更改事件。

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

Answer 5

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

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

还有一些代码：

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

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

未经测试但估计没问题。

如果您在某个页面上有多个问题，请退回，我们会考虑将其限制为只回答相关问题。

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

5 个答案: