jQuery 复选框答案

【问题标题】：Jquery check boxesjQuery 复选框
【发布时间】：2013-03-03 04:47:58
【问题描述】：

我想做以下事情：

我有三个复选框：

隐藏框1 隐藏框2 隐藏框 3

我想用 Jquery 来：

选中 Box1 时，隐藏框 2 和 3，如果未选中则使框 2 和 3 可见。另外我在哪里放置代码？

提前致谢

【问题讨论】：

隐藏 Box1 隐藏 Box2 隐藏 Box3
有问题的邮政编码可以在哪里格式化，而不是在 cmets 中。显示的代码对复选框语法也无效

标签： javascript jquery checkbox

【解决方案1】：

这是一个使用您在评论中提供的标记的完整示例。我还冒昧地给出了复选框的标签，这意味着当您单击文本时，它将切换复选框（更易于访问和使用）。

See on JSFiddle

HTML

<form>
    <div class="toggle-checkbox">
        <input type="checkbox" name="checkMeOut" id="box1" />
        <label for="box1">Hide Box1</label>
    </div>
    <div class="toggle-checkbox">
        <input type="checkbox" name="checkMeOut" id="box2" />
        <label for="box2">Hide Box2</label>
    </div>
    <div class="toggle-checkbox">
        <input type="checkbox" name="checkbox3" id="box3" />
        <label for="box3">Hide Box3</label>
    </div>
</form>

jQuery

$('.toggle-checkbox input[type=checkbox]').click(function () {
    if ($(this).is(':checked')) {
        $('.toggle-checkbox').not($(this).closest('.toggle-checkbox')).hide();
    } else {
        $('.toggle-checkbox').show();
    }
});

要在您的页面中包含 jQuery，请将以下内容放在您的 <head> 标记中。

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

【讨论】：

这适用于 JS fiddle，但是当我把它放在我的记事本++中并刷新我的 chrome 时，没有任何效果。我需要安装一些东西吗？
你包含了 jQuery 吗？只要你有 .toggle-check div，一切都应该工作。
非常感谢您的工作！我需要它们内联浮动而不是列表样式
没问题，记得点击勾选接受答案。要内联浮动，您可以将 .toggle-checkbox 元素更改为跨度。 jsfiddle.net/JWCzc/5
我遇到了一些问题，整个代码停止工作，我没有做任何更改，我所做的只是关闭我的电脑，在 firefox、chrome、IE 中打开文件再次测试，IE 和 Chrome当我点击这些框时，重新加载它们后没有任何活动。

【解决方案2】：

你可以在标签之间这样做

$('.one').click(function () {
if ($(this).is(':checked')) {
    $('input[type=checkbox]').not(this).hide();
} else {
    $('input[type=checkbox]').not(this).show();
}
});

http://jsfiddle.net/davidchase03/MYASr/

【讨论】：

【解决方案3】：

假设您的复选框的 ID 为“box1”、“box2”和“box3”：

$(document).ready(function(){
    $("#box1").change(function(){
        $("#box2, #box3").toggle();
    }
}

我没有对此进行测试，但无论何时选中或取消选中隐藏框 1，它都会切换其他两个框的可见性。

您的代码的最佳位置是位于结束正文标记之前的脚本元素内，例如

<body>
Your page stuff here
<script>
Code from above here
</script>
</body>

【讨论】：

如果您想使用其他盒子，David Chase 的回答肯定会为您提供更多帮助。它还更好地利用了 jQuery 的选择器。不过脚本的位置是一样的。