チェックボックスをオンにするチェックボックスを表示/非表示

Question

私はレールフォームを持っています。私は4つのチェックボックスを持っています。私がしようとしているのは、3ページのチェックボックスを非表示にすることです。 4番目のチェックボックスがオンになっているときは、隠れたものを表示します。チェックボックスをオフにすると、3つのチェックボックスが再び非表示になります。

これはこれまで私が行ってきたことです。

レールから生成された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選択に基づいて、すべてのcheckbox、それcssを使用してコンテンツや、その後の追加/削除、クラスを非表示にすることです。

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

HTML:を非表示にする必要があるcheckboxを持っているすべてのそれらのtd'sにクラスを追加します。

DEMO

CSS、コードの下を参照してください。

<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

これを試してみてください：

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

Answer 3

最初のエラー行が欠落している括弧であるということです。

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

秒、

あなたは、クリックを追加したり、チェックボックスにイベントを変更する必要があります。あなたは、これはあなたのhtml aを改正伴うだろう軒並み達成するために、より汎用的なツールをお勧めします

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

Answer 4

ない、あなたがやっているまさに確認ができますが、イベントハンドラをアタッチする必要があります...

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

少し：

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

はテストされていませんが、問題はありません。

ページに複数の質問がある場合は、ポップバックして、関連する質問だけに回答するように制限します。

Answer 5

スクリプトの終了タグは</script>で、< /script>ではありません。