使用 jQuery 显示/隐藏复选框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15766875/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show/Hide with Checkbox using jQuery
提问by Andrew
I am trying to have a section of an html form to show/hide based on a checkbox. This is the essence code I have:
我正在尝试根据复选框显示/隐藏 html 表单的一部分。这是我拥有的本质代码：
<script src="/js/jquery.js"></script>
<script language="JavaScript">
function toggle(className){
var $input = $(this);
if($(this).prop('checked'))
$(className).show();
else
$(className).hide();
}
</script>
<fieldset><legend>Check Here
<input type="checkbox" onclick="toggle('.myClass')" ></legend>
<span class="myClass">
<p>This is the text.</p>
</span>
</fieldset>
When you click on the checkbox, the span gets hidden and will not come back. I have also used $(this).is(':checked'). It appears that $(this).prop('checked')is evaluating to falsewhether it is checked or not. My best guess is that I am using $(this)incorrectly. What am I missing here?
当您单击复选框时，跨度将被隐藏并且不会回来。我也用过$(this).is(':checked')。无论是否检查，它似乎$(this).prop('checked')都评估为假。我最好的猜测是我使用$(this)不正确。我在这里缺少什么？
回答by pala?н
HTML, pass thisfrom on click event
HTML，this从点击事件传递
<input type="checkbox" onclick="toggle('.myClass', this)" ></legend>
JS
JS
function toggle(className, obj) {
var $input = $(obj);
if ($input.prop('checked')) $(className).hide();
else $(className).show();
}
OR, without using propyou can just do:
或者，不使用prop您可以只做：
function toggle(className, obj) {
if ( obj.checked ) $(className).hide();
else $(className).show();
}
OR, in one-line using .toggle( display ):
或者，在一行中使用.toggle( display )：
function toggle(className, obj) {
$(className).toggle( !obj.checked )
}
回答by adeneo
Use an event handler that is'nt inline, and then just toggle()the element based on the checkbox state :
使用非内联的事件处理程序，然后仅toggle()使用基于复选框状态的元素：
<script src="/js/jquery.js"></script>
<script type="text/javaScript">
$(function() {
$('input[type="checkbox"]').on('change', function() {
$(this).closest('fieldset').find('.myClass').toggle(!this.checked);
});
});
</script>
<fieldset>
<legend>Check Here<input type="checkbox"></legend>
<span class="myClass">
<p>This is the text.</p>
</span>
</fieldset>
This would even work with several fieldset's with the same markup.
这甚至适用于具有相同标记的多个字段集。
回答by kpull1
try binding event via jQuery, and then you can access to $(this):
尝试通过 jQuery 绑定事件，然后您可以访问$(this)：
$(document).ready(function() {
$(":checkbox").click(function(event) {
if ($(this).is(":checked"))
$(".myClass").show();
else
$(".myClass").hide();
});
});
