当复选框被选中时显示表格行
问题描述:
当复选框id="post"
被选中/取消选中时,如何使用jQuery显示/隐藏id="hidden"
这一行?当复选框被选中时显示表格行
<tr>
<td valign="top">
<p>Contact Method:</p>
</td>
<td> </td>
<td align="left" valign="top">
<p>
<input style="width:20px!IMPORTANT;" type="checkbox" name="CheckboxGroup1[]" value="Phone" id="phone" />
<label style="margin-right: 25px;">Phone</label>
</p>
<p>
<input style="width:20px!IMPORTANT;" type="checkbox" name="CheckboxGroup1[]" value="Email" id="email" />
<label style="margin-right: 25px;">Email</label>
</p>
<p>
<input style="width:20px!IMPORTANT;" type="checkbox" name="CheckboxGroup1[]" value="Post" id="post" />
<label style="margin-right: 25px;">Post</label>
</p>
</td>
</tr>
<tr id="hidden">
<td>
<p>Address (if applicable):</p>
</td>
<td> </td>
<td colspan="2"><input type="text" name="address" id="address" /></td>
</tr>
答
与jQuery的做一种紧凑的方法:
$(document).ready(function() {
$("#post").change(function() {
$("#hidden").toggle();
});
})
工作演示:JSFiddle。
答
试试这个....
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script> $("#post").click(function(){ $("#hidden").toggle(); })); </script>
答
试试这个:
jQuery(function ($) {
$('tr#hidden').hide();
$('input#post').change(function(e) {
if($(this).attr('checked'))
{
$('tr#hidden').show();
}
else
{
$('tr#hidden').hide();
}
});
});
答
好吧例如:
<div id="hidden">
<p>Some Sample Content</p>
</div>
<div id="control">
<input type="checkbox" id="check" />
<label for="check">Show Element</label>
</div>
使用jQuery这样的:
$(document).ready(function(){
$('#check').click(function(){
checkIt();
});
});
function checkIt(){
if ($('#check:checked').val() == "on"){
$('#hidden').css({'display':'block'});
} else {
$('#hidden').css({'display':'none'});
}
}
此外,这里是一个工作示例:http://jsfiddle.net/dbs3r/
这就是我曾尝试的,但是当复选框被选中时,它既不显示也不隐藏。我使用WordPress的事实会有什么不同? – Rob 2012-08-14 13:03:34
@Rob请看看我刚刚添加的工作演示。你能告诉我们非工作版本的源代码吗? – Chris 2012-08-14 13:06:23