当用户检查'学生'时(check-1)。 2个复选框值应该消失并显示文本输入div。截至目前,我已经得到了输入显示。但我似乎无法让复选框消失。
我试过了:
$(function () {
$('#check-1').change(function () {
$('.name').toggle(this.checked);
$('#check-1').hide();
$('#check-2').hide();
}).change();
});
但这不起作用。检查“学生”后如何隐藏复选框?有什么想法吗?
这是一个小fiddle。感谢您的帮助。
答案 0 :(得分:2)
请参阅以下代码:
$(".my-check").change(function() {
if ( $(this).is(':checked') ) {
$(".my-box").show();
} else {
$(".my-box").hide();
}
});
答案 1 :(得分:1)
用div包装你的文本框,说“thisWrapper”
<div id="thisWrapper">
<input type="checkbox" id="check-1" class="checkchoice staff" required><label for="check-1" class="choice staff">Staff</label>
<input type="checkbox" id="check-2" class="checkchoice student" required><label for="check-2" class="choice student">Student</label>
</div>
并在您发布的更改事件中添加:
$("thisWrapper").hide();
应该一次隐藏两个复选框。当然,您必须添加“取消”或“重置”按钮才能再次显示复选框。
或者你可以给复选框一个新的类名,比如“mycheckboxes”,并调用它:
$(".mycheckboxes").click(function() {
$('#check-1').hide();
$("#check-2").hide();
});
*这里是“我在FIDDLER工作的全部例子”**
请改为尝试:
<div id="thisWrapper">
<input type="checkbox" id="check-1" class="checkchoice" required><label for="check-1" class="choice staff">Staff</label>
<input type="checkbox" id="check-2" class="checkchoice" required><label for="check-2" class="choice student">Student</label>
</div>
<div id="nameinput">
<input type="text" placeholder="So what's your name?" />
</div>
<script>
$(function() {
$(".checkchoice").change(function() {
$("#thisWrapper").hide();
$("#nameinput").show();
});
});
</script>