Показать/скрыть поле для проверки флажка

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> 

И в яваскрипте

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

Попробуйте это:

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 ~ немного:

<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> это может работать.