如何使用复选框和 javascript 显示/隐藏 div？答案

【问题标题】：How can I show/hide divs with checkboxes and javascript?如何使用复选框和 javascript 显示/隐藏 div？
【发布时间】：2016-02-04 17:28:23
【问题描述】：

我看过几篇与我正在寻找的帖子相似的帖子，但与我的确切情况不完全一样。我想在单击某些复选框时显示/隐藏 html div。

我发现了以下内容：

<script>
jQuery(function(){
    var checks = $('#checkbox1, #checkbox2, #checkbox3');

    checks.click(function(){
        if (checks.filter(':checked').length == checks.length) {
            $('#purchaseForm').show();
        } else {
            $('#purchaseForm').hide();
        }
    }).triggerHandler('click')
})    


   </script>

<label><input name="checkbox1" id="checkbox1" value="" type="checkbox"> checkbox1 </label>
<label><input name="checkbox2" id="checkbox2" value="" type="checkbox"> checkbox2 </label>
<label><input name="checkbox3" id="checkbox3" value="" type="checkbox"> checkbox3 </label>


     <div id="purchaseForm">
         Content Here
     </div>

我正在寻找的是：

<label><input name="checkbox1" id="checkbox1" value="" type="checkbox"> checkbox1 </label>
<label><input name="checkbox2" id="checkbox2" value="" type="checkbox"> checkbox2 </label>
<label><input name="checkbox3" id="checkbox3" value="" type="checkbox"> checkbox3 </label>

<div id="A">
Display for selected Checkbox one only
</div>

<div id="B">
Display for selected Checkbox two only
</div>

<div id="C">
Display for selected Checkbox three only
</div>

<div id="D">
Display for selected Checkboxes one and two
</div>

<div id="E">
Display for selected Checkboxes one and three
</div>

<div id="F">
Display for selected Checkboxes two and three
</div>

<div id="G">
Display for selected Checkboxes one two and three
</div>

这有助于我更多地理解这一点，但不是全部。单击所有三个复选框时，将显示内容。我正在寻找的是基于复选框组合的内容。

例如，假设 checkbox1 被选中，那么只会显示 div-A。但如果复选框 1 和 3 都被选中，则会显示 div-E，我正在寻找每个复选框。

我仍在学习 javascript，因此我们将不胜感激任何建议。谢谢！

【问题讨论】：

你能发布你的HTML吗（有div-A、div-E等的那个）
尝试查看纯 JavaScript。不要用 jquey 把它复杂化。创建一个普通函数并在 html 中添加一个 onclick 事件。简单易行。然后只需添加像 var chk = document.getElementById ('checkbox1').checked 这样的代码，这将是 true 或 false
@JacquesKoekemoer 使用 jquery 比纯 javascript 更简单。 var chk = $('input[type=checkbox]).prop('checked') 将是 true 或 false（getter），var chk = $('input[type=checkbox]).prop('checked', true) 它会检查复选框（setter）
@MarcosPérezGude 是的，我同意 JQuery 在您理解时会更简单，但是如果您阅读他的问题，您会发现他仍在学习 Javascript。在学习 JQuery 之前先学习 JS 更容易。此外，他实现 JQuery 的方式过于复杂

标签： javascript jquery html checkbox

【解决方案1】：

$(document).ready(function() {
  var map = {
    0: '',  1: 'A', 2: 'B', 3: 'D',
    4: 'C', 5: 'E', 6: 'F', 7: 'G'
  };
  $('#checkbox1, #checkbox2, #checkbox3').change(function(event) {
    var bitmask = ($('#checkbox1')[0].checked?1:0)+
                  ($('#checkbox2')[0].checked?2:0)+
                  ($('#checkbox3')[0].checked?4:0);
    $('div').hide();
    $('div#'+map[bitmask]).show();
  });
  $('div').hide();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label><input name="checkbox1" id="checkbox1" value="" type="checkbox"> checkbox1 </label>
<label><input name="checkbox2" id="checkbox2" value="" type="checkbox"> checkbox2 </label>
<label><input name="checkbox3" id="checkbox3" value="" type="checkbox"> checkbox3 </label>

<div id="A">
Display for selected Checkbox one only
</div>

<div id="B">
Display for selected Checkbox two only
</div>

<div id="C">
Display for selected Checkbox three only
</div>

<div id="D">
Display for selected Checkboxes one and two
</div>

<div id="E">
Display for selected Checkboxes one and three
</div>

<div id="F">
Display for selected Checkboxes two and three
</div>

<div id="G">
Display for selected Checkboxes one two and three
</div>

【讨论】：

我喜欢您的映射变量，用于将位掩码映射到元素 ID。这是个好主意。

【解决方案2】：

我会将复选框映射到二进制值，其中 checkbox1 = 1、checkbox2=2、checkbox3=4、checkbox4=8 等。所以，检查该框是否被选中，如果是，则添加它的二进制值到一个数字。完成后，分析数字以确定选中的框。

Here is a working codepen

HTML：

<label><input name="checkbox1" id="checkbox1" value="" type="checkbox"> checkbox1 </label>
<label><input name="checkbox2" id="checkbox2" value="" type="checkbox"> checkbox2 </label>
<label><input name="checkbox3" id="checkbox3" value="" type="checkbox"> checkbox3 </label>


 <div id="content">
     a
 </div>

JS：

$('input').click(function() {
  var number = checkCheckBoxes();
  if(number == 0) {
    $('#content').html("None of them!");
  }
  if(number == 1) {
    $('#content').html("Just 1!");
  }
  if(number == 2) {
    $('#content').html("Just 2!");
  }
  if(number == 3) {
    $('#content').html("Just 1 & 2!");
  }
  if(number == 4) {
    $('#content').html("Just 3!");
  }
  if(number == 5) {
    $('#content').html("Just 1 & 3!");
  }
  if(number == 6) {
    $('#content').html("Just 2 & 3!");
  }
  if(number == 7) {
    $('#content').html("All of them!");
  }
})

function checkCheckBoxes() {
  var number = 0;
  if($('#checkbox1:checked').length) {
    number = number + 1;
  }
  if($('#checkbox2:checked').length) {
    number = number + 2;
  }
  if($('#checkbox3:checked').length){
    number = number + 4;
  }
  return number;
}

【讨论】：

【解决方案3】：

如果您使用onchangeevent 而不是click event 管理复选框会更好：

checks.on('change', function(){
     $(this).prop('checked') // true or false
});

【讨论】：

【解决方案4】：

最干净的解决方案是在 div 本身中添加复选框 id 并使用它。

使用属性包含选择器来查找相应的 div。 https://api.jquery.com/attribute-contains-selector/

检查下面的代码。

HTML

<label>
  <input name="checkbox1" id="checkbox1" value="" type="checkbox"> checkbox1 </label>
<label>
  <input name="checkbox2" id="checkbox2" value="" type="checkbox"> checkbox2 </label>
<label>
  <input name="checkbox3" id="checkbox3" value="" type="checkbox"> checkbox3 </label>

<div id="A" checkboxids="checkbox1">
  Display for selected Checkbox one only
</div>

<div id="B" checkboxids="checkbox2">
  Display for selected Checkbox two only
</div>

<div id="C" checkboxids="checkbox3">
  Display for selected Checkbox three only
</div>

<div id="D" checkboxids="checkbox1,checkbox2">
  Display for selected Checkboxes one and two
</div>

<div id="E" checkboxids="checkbox1,checkbox3">
  Display for selected Checkboxes one and three
</div>

<div id="F" checkboxids="checkbox2,checkbox3">
  Display for selected Checkboxes two and three
</div>

<div id="G" checkboxids="checkbox1,checkbox2,checkbox3">
  Display for selected Checkboxes one two and three
</div>

JS

 $("div[checkboxids]").hide();

$("input:checkbox").click(function() {

  // Hide all the div
  $("div[checkboxids]").hide();

  // Enable respective divs only

  $("input:checked").each(function() {
    $("div[checkboxids*='" + $(this).attr("id") + "']").show();
  });

});

演示：https://jsfiddle.net/qp2mLj99/4/

【讨论】：

【解决方案5】：

$(document).ready(function(){
  $('#checkbox1').click(function(){
        $("#purchaseForm").slideToggle('slow');
        $("#purchaseForm").toggleClass('active');
  });
});

这很简单，而且效果很好。您可以随时更改 slideToggle 或 toggleClass 以显示和隐藏。

希望对你有帮助！

【讨论】：