如何在 HTML CSS 中用复选框（勾选取消勾选）替换加减切换？答案

【问题标题】：How to replace plus minus toggle with checkbox(tick untick) in HTML CSS?如何在 HTML CSS 中用复选框（勾选取消勾选）替换加减切换？
【发布时间】：2020-09-28 03:26:18
【问题描述】：

我想用复选框（加号，减号）替换加减号扩展切换。我可以在切换复选框中加减号吗？如果我单击复选框，则减号更改为加号，它将扩大，反之亦然。加减应该在复选框中。提前致谢。我的代码如下：-

HTML/CSS 代码：-

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active, .collapsible:hover {
  background-color: #555;
}

.collapsible:after {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

.content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
}
</style>
</head>
<body>

<button class="collapsible">Open Section 1</button>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>


<script>
var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    } 
  });
}
</script>

</body>
</html>

【问题讨论】：

标签： javascript html css reactjs bootstrap-4

【解决方案1】：

您需要在 CSS 内容（2610 和 2611）中将 unicode 更改为一个框和一个复选框。见这里：

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active, .collapsible:hover {
  background-color: #555;
}

.collapsible:after {
  content: '\2610';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2611";
}

.content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
}
</style>
</head>
<body>

<button class="collapsible">Open Section 1</button>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>


<script>
var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    } 
  });
}
</script>

</body>
</html>

【讨论】：

我可以把加减号放在复选框中进行切换吗？如果我点击复选框然后减号变为加号，它会扩大，反之亦然。
是的，您可以这样做，只需在“复选框”部分添加一些样式并保留旧的 unicode 以保留加号和减号。看看我在这里做了什么：jsfiddle.net/7nh6xyds/2

【解决方案2】：

您可以简单地将<div> 标头替换为<label> 和<checkbox> 并使用复选框标记更改事件，还请注意我将this.nextElementSibling; 更改为this.parentElement.nextElementSibling; 这是一个有效的sn-p多个元素：

var coll = document.getElementsByClassName("toggle");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("change", function() {
    this.classList.toggle("active");
    var content = this.parentElement.nextElementSibling;
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    } 
  });
}

.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: calc(100% - 36px);
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  display: inline-block;
}

.collapsible input[type="checkbox"] {
  float:right;
}

.active, .collapsible:hover {
  background-color: #555;
}

.active:after {
  content: "\2212";
}

.content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
}

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<!--<button class="collapsible">Open Section 1</button>-->
<label class="collapsible" for="toggle-collapsible">Open Section 1<input type="checkbox" name="toggle-collapsible" id="toggle-collapsible" class="toggle" /> </label>

<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<!--<button class="collapsible">Open Section 1</button>-->
<label class="collapsible" for="toggle-collapsible2">Open Section 1<input type="checkbox" name="toggle-collapsible2" id="toggle-collapsible2" class="toggle" /> </label>

<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>


</body>
</html>

【讨论】：

我可以把加减号放在复选框中进行切换吗？如果我点击复选框然后减号变为加号，它会扩大，反之亦然
嗯，让我检查一下！我明白你的意思了。
感谢 Root，我得到了解决方案。感谢您的支持。
@Sharadkumar，没问题！很高兴提供帮助:)