Question

我看过几篇类似于我正在寻找的帖子，但不是我确切的情况。我想在点击一些复选框时显示/隐藏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，所以任何建议都会非常感激。谢谢！

Answer 1

我会将复选框映射到二进制值，其中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;
}

Answer 2

unnested_business_names

view_business_favorite_count

Answer 3

如果您使用onchange事件而不是click事件管理复选框，情况会更好：

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

Answer 4

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

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

检查以下代码。

HTML

_builtin_compact_pretty_function

JS

<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>

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

Answer 5

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

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

希望它可以帮到你！

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

5 个答案: