Bootstrap显示并隐藏带有复选框的id-Java 学习之路

如果用户在复选框中点击（是），我有一个我要显示的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__

是的

2 回答

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

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

回复于 2024-04-29T09:57:06+08:00

我所知道的最简单的方法是在项目中添加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">
  

  No: <input type="radio" id="test2ck" ng-click="yesIsChecked = false" value="n" ng-model="checked">
  

  <div ng-show="yesIsChecked">
    <span class="glyphicon glyphicon-thumbs-up"></span> I show up when your checkbox is checked.
  </div>
</div>
</body>

</html>

回复于 2024-04-29T09:57:06+08:00

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

2 回答

相关问题