使用复选框引导显示和隐藏id
使用复选框引导显示和隐藏id
提问于 2015-03-23 07:33:09
我有一个div，我想显示用户是否在复选框中单击(是)，如果在其他复选框中单击，则隐藏(否)
我需要一些javascript或jquery代码来显示和隐藏id "test“的div，这取决于在复选框中选择的用户(是或否)
<div class="row" id="test">
//div that I want show/hide
</div>
//I have this two checkbox yes__ no__ Yes No回答 2
Stack Overflow用户
回答已采纳
发布于 2015-03-23 07:47:54
您可以对此使用“检查”，并执行如下操作
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的父元素。
Stack Overflow用户
发布于 2015-03-23 09:54:23
我所知道的最简单的方法是将AngularJS和角动画添加到您的项目中(见下文)。然后，您可以使用简单的指令来执行您想做的事情，而AngularJS在JavaScript中为您完成了所有的“繁重工作”。这不需要任何定制的javascript或css。我包括了一些额外的造型引导，但这是不必要的，你想要的。
注意:也许有一种方法可以通过复选框来实现这一点，但是单选按钮更容易在两者之间切换。如果您想使用单个复选框，选中“是”，不选中“否”，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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/29214210
复制相关文章
相似问题
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
