javascript - 如何显示带有复选框的div并取消选中其他复选框的其他复选框

标签 javascript jquery checkbox

您好,这里是 javascript 和 jquery 的新手,完全不知道我在做什么。我有 4 个复选框。 1 到 4。我需要有 1 和 2 个复选框,当其中一个或两个被选中时显示隐藏的#div1 并取消选中复选框 3 和 4(如果它们被选中)并隐藏 div2(如果显示)。然后 3 和 4 复选框当一个或两个被选中时显示隐藏 #div2 并取消选中复选框 1 和 2(如果它们被选中)并隐藏 div1 如果显示。

这是我的 html,没有任何 javascript。尝试了一些,但我不太擅长。

<html>
<head>
<style type="text/css">
<!--
.divstyle
{
    display: none;
    border: 1px solid #000;
    height: 100px;
    width: 200px;
    margin: 10px 0 0 0;
}
-->
</style>
</head>
<body>
<p>
<input name="chk1" type="checkbox" id="chk1"/> 
Group1 Black
<input name="chk2" type="checkbox" id="chk2"/>
Group1 White
<input name="chk3" type="checkbox" id="chk3"/>
Group2 Red
<input name="chk4" type="checkbox" id="chk4"/>
Group2 Blue</p>
<div class="divstyle" id="div1">This is Group 1 for Black and White</div>
<div class="divstyle" id="div2">This is Group 2 for Red and Blue</div>
</body>
</html>

我希望我在这里说得有道理。

你们能帮忙吗?提前致谢。

最佳答案

这应该适合你:

$("#chk1, #chk2").click(function(){
    $("#chk3, #chk4").removeAttr("checked");
    $("#div1").show();
    $("#div2").hide();
});
$("#chk3, #chk4").click(function(){
    $("#chk1, #chk2").removeAttr("checked");
    $("#div2").show();
    $("#div1").hide();
});

只需注册一个.click() id 所针对的复选框的处理程序。使用 .removeAttr()取消选中其他框。然后使用 .show().hide()显示正确的 div。

Code example on jsfiddle

关于javascript - 如何显示带有复选框的div并取消选中其他复选框的其他复选框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5755672/

相关文章:

javascript - 按属性在对象数组中查找重复项的最短方法

javascript - setState 函数未定义

javascript - 如何使 JQuery 切换不移动元素?

jquery - 如何淡化更改背景图像

javascript - 我想知道如何创建两个不受相同代码影响的可搜索表

jquery - ajax表单提交中如何提交表单名称和提交按钮名称

javascript - 单击表格行的对话框

vb.net - 使用 VB.net,我有多个动态生成的复选框,我需要获取它们当前的选中状态

html - 使用 :checked pseudo selector multiple times for "checkbox hack"

c#-4.0 - 如何在 C# 中动态生成在 DataGridView 内选中的复选框?