확인란을 선택하면 확인란을 표시/숨기기

Question

난 레일 양식이 있습니다. 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> 

이 작동하지 않는 자바 스크립트

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

합니다. 뭐가 잘못 되었 니? if ($('#question1').is(':checked')){

DEMO

으로 더 나은 방법을 경우 조건을 변경 감사

Answer 1

봅니다 질문 checkbox 선택에 따라 클래스를 css을 사용하여 모든 checkbox과 내용을 숨길 다음 추가/제거하는 것입니다.

.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() { 

초,

당신은 클릭을 추가하거나 체크 박스에 이벤트를 변경해야합니다.

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

당신이 당신의 HTML a를 개정 포함 할 전반적으로 달성하기 위해 더 일반적인 도구를 할 수 있습니다

작은 :

<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>이 아니어야합니다.