如何解决如何使用JQuery隐藏/显示与相邻复选框相关联的div?
| 我刚开始使用JQuery并感到困惑。我想要一系列输入复选框,当选中它们时,它们将显示/隐藏相邻的文本框。我已经掌握了逻辑的一部分,但是您可能会发现,选中任何一个复选框,都会隐藏/显示所有文本框。如何使每个复选框仅影响直接位于其下方的div的内容?我不想为每个复选框写一个单独的函数。<script type=\"text/javascript\">
$(document).ready(function() {
$(\":checkbox\").click(function(){
if ($(\":checkbox\").is(\":checked\")) {
$(\".optionalinfo\").show(\"fast\");}
else {
$(\".optionalinfo\").hide(\"fast\");}
});
});
</script>
</head>
<body>
<input id=\"chk1\" type=\"checkbox\">Hide/Show text1</input>
<div class=\"optionalinfo\">
<input id=\"text1\" type=\"text\"></input>
</div>
<br>
<input id=\"chk2\" type=\"checkbox\">Hide/Show text2</input>
<div class=\"optionalinfo\">
<input id=\"text2\" type=\"text\"></input>
</div>
<br>
<input id=\"chk3\" type=\"checkbox\">Hide/Show text3</input>
<div class=\"optionalinfo\">
<input id=\"text3\" type=\"text\"></input>
</div>
解决方法
要在复选框旁边显示“ 1”,请执行以下操作:
$(\'input:checkbox\').click(
function()
$(this).next(\'.optionalinfo\').show();
});
JS小提琴演示
要使复选框处于切换状态,请执行以下操作:
$(\'input:checkbox\').click(
function() {
$(this).next(\'.optionalinfo\').toggle();
});
JS小提琴演示
, http://api.jquery.com/next/
<script type=\"text/javascript\">
$(document).ready(function() {
$(\":checkbox\").click(function(){
if ($(\":checkbox\").is(\":checked\")) {
$(this).next(\'div.optionalinfo\').show(\"fast\");
} else {
$(this).next(\'div.optionalinfo\').hide(\"fast\");
}
});
});
</script>
, 使用(jQuery v1.6)
$(\'input:checkbox\').live (\'click\',function() {
if($(this).prop(\'checked\')) {
$(this).next(\'div.optionalinfo\').hide();
}
else {
$(this).next(\'div.optionalinfo\').show();
}
});
演示
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。