Question

我想要显示一个div，如果用户点击一个复选框（是）并隐藏，如果点击其他复选框（否）

我需要一些javascript或jquery代码来显示和隐藏id为＃34的div; test＆＃34;取决于用户在复选框中的选择（是或否）

<div class="row" id="test">
        //div that I want show/hide
</div>


//I have this two checkbox yes__ no__

是没有

Answer 1

您可以使用已选中的内容并执行类似的操作

input[type=checkbox]:checked + div {diplay: block;}

这是我为你做的一个例子：

<强> LIVE DEMO

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的父元素

Answer 2

我所知道的最简单方法是在项目中添加AngularJS和angular-animate（见下文）。然后，您可以使用简单的指令来执行您想要的操作，并且AngularJS可以完成所有重要的操作＆＃34;在JavaScript中为你。这不需要任何自定义的javascript或css。我将Bootstrap包含在一些额外的造型中，但它并不是你想要的。

注意：可能有一种方法可以使用复选框，但单选按钮更容易切换。如果您想使用单个复选框，请检查＆＃34;是＆＃34;并且未选中＆＃34; no＆＃34;，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>

Bootstrap显示并隐藏带有复选框的id

2 个答案: