我有一个 div，如果用户单击一个复选框（是），我想显示它；如果用户单击其他复选框（否），则隐藏它
如何使用 javascript、jquery 或 css 代码根据用户在复选框中的选择来显示和隐藏 id 为“test”的 div？ （是或否）
<div class="row" id="test">
//div that I want to show/hide
</div>
//I have this two checkboxes yes__ no__
<input type="checkbox" name="m_name_no" value="no" id="m_id_no" class="check"/> No </input>
</div>
您可以使用检查并执行类似的操作
input[type=checkbox]:checked + div {diplay: block;}
这是我为您制作的示例：
HTML：
<div style="clear:both;">
<input type="checkbox" id="test1ck"> <div class="lool" >Check and Uncheck Me</label><br>
<input type="checkbox" id="test2ck"> <div class="lool" >Check and uncheck me too!</div></div>
CSS：
.lool {
display: none;
}
input[type=checkbox]:checked ~ div.lool {
display:block;
color: red;
}
当然，请确保您没有尝试选择父元素，仅使用 CSS 是无法选择父元素的
我知道的最简单的方法是将 AngularJS 和 Angular-animate 添加到您的项目中（见下文）。 然后，您可以使用简单的指令来执行您想要的操作，AngularJS 会在 JavaScript 中为您完成所有“繁重的工作”。 这不需要任何自定义 javascript 或 css。 我添加了 Bootstrap 来实现一些额外的样式，但这对于您想要的并不是必需的。
注意：可能有一种方法可以通过复选框来实现此目的，但单选按钮更容易在之间切换。 如果您想使用单个复选框，选中“是”并取消选中“否”，则 HTML 标记会更简单。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Example - example-example92-production</title>
<link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.6/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.6/angular-animate.js"></script>
</head>
<body ng-app="ngAnimate">
<div>
Yes: <input type="radio" id="test1ck" ng-click="yesIsChecked = true" value="y" ng-model="checked">
<br/>
No: <input type="radio" id="test2ck" ng-click="yesIsChecked = false" value="n" ng-model="checked">
<br/>
<div ng-show="yesIsChecked">
<span class="glyphicon glyphicon-thumbs-up"></span> I show up when your checkbox is checked.
</div>
</div>
</body>
</html>