[英]Show/hide check boxes on checking a check box
I have a rails form. 我有滑轨表格。 I have 4 check boxes. 我有4个复选框。 What I am trying to do is, hide 3 of the check boxes on page load. 我想做的是,隐藏页面加载中的3个复选框。 And when the 4th check box is checked show the hidden ones. 选中第四个复选框后,显示隐藏的复选框。 And when the check box is unchecked, again hide the 3 check boxes. 并取消选中该复选框时,再次隐藏3个复选框。
This is what I have so far; 这是我到目前为止所拥有的;
The HTML code generated from the rails form: 从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>
And the javascript 和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>
This doesn't work. 这行不通。 What is wrong? 怎么了? Thanks 谢谢
Try changing the if condition as if ($('#question1').is(':checked') ){
尝试更改if条件,就if ($('#question1').is(':checked') ){
A better approach is to hide all checkbox
and it contents using css
and then add/remove class based on question checkbox
selection. 更好的方法是使用css
隐藏所有checkbox
及其内容,然后根据问题checkbox
选择添加/删除类。 See below code, 参见下面的代码,
CSS: CSS:
.hideContents input, .hideContents label { display: none; }
HTML:
Add class to all those td's
that has checkbox
which needs to be hidden. HTML:
将类添加到所有具有checkbox
需要隐藏的td's
。
<td class="hideContents">
JS: JS:
$('#question1').on ('change', showOptions);
function showOptions() {
if ($('#question1').is(':checked') ){
$('.hideContents')
.removeClass('hideContents')
.addClass('showContents');
} else {
$('.showContents')
.removeClass('showContents')
.addClass('hideContents');
}
}
脚本结束标记应为</script>
而不是< /script>
这可能有效。
Try this: 尝试这个:
function showOptions() {
if ($('#question1').checked) {
$('#option1').show()
$('#option2').show()
$('#option3').show()
}
}
first error is that line is missing parentheses. 第一个错误是该行缺少括号。
if $('#question1').checked() {
second, 第二,
you should append a click or change event to the checkbox. 您应该将click或change事件添加到该复选框。
$("#question1").on("click",function(){
if($(this).checked()){
$('#option1').show();
$('#option2').show();
$('#option3').show();
}else{
$('#option1').hide();
$('#option2').hide();
$('#option3').hide();
}
});
Not sure exactly what you are doing but you need to attach event handlers... 不确定您在做什么,但是您需要附加事件处理程序...
$(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()
}
}
You might want a more generic tool to achieve across the board this would involve amending your html a little: 您可能想要一个更通用的工具来全面实现,这将涉及对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>
And some code: 和一些代码:
$(function(){
var $answers = $('.answer').parent();
$answers.hide();
$("table").on('click',$('input.question'),function(){
if ( $(this).is(':checked') ) {
$answers.show();
}else{
$answers.hide();
}
});
});
not tested but reckon thats ok. 没有测试,但认为没关系。
IF you have more than one question on a page then pop back and we'll look at restricting it to answers to just the relevant questions. 如果您在一个页面上有多个问题,然后跳回去,我们将限制它仅回答相关问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.