如果选中了多个复选框，如何添加事件

How can I add event if multple checkboxes are checked?

本文关键字：何添加 添加 事件 复选框 如果      更新时间：2023-09-26

https://jsfiddle.net/rsu1cjss/7/

我要显示div（仅此一个）

<div class="two-colors box">You have selected <strong>two colors</strong> so i am here</div>

如果检查了红色和绿色

JS-

$('input[type="checkbox"]').click(function(){
    if($(this).attr("value")=="red"){
        $(".red").toggle();
    }
    if($(this).attr("value")=="green"){
        $(".green").toggle();
    }
    if($(this).attr("value")=="blue"){
        $(".blue").toggle();
    }
    if($(this).attr("value")=="yellow"){
        $(".yellow").toggle();
    }
});

HTML

<div>
<label><input type="checkbox" name="colorCheckbox" value="red"> red</label>
<label><input type="checkbox" name="colorCheckbox" value="green"> green</label>
<label><input type="checkbox" name="colorCheckbox" value="blue"> blue</label>
<label><input type="checkbox" name="colorCheckbox" value="yellow"> yellow</label>
</div>
<div class="red box">You have selected <strong>red checkbox</strong> so i am here</div>
<div class="green box">You have selected <strong>green checkbox</strong> so i am here</div>
<div class="blue box">You have selected <strong>blue checkbox</strong> so i am here</div>
<div class="yellow box">You have selected <strong>blue checkbox</strong> so i am here</div>
<div class="two-colors box">You have selected <strong>two colors</strong> so i am here</div>

CSS

   .box{
    padding: 20px;
    display: none;
    margin-top: 20px;
    border: 1px solid #000;
}
.red{ background: #ff0000; }
.green{ background: #00ff00; }
.blue{ background: #0000ff; }
.yellow{ background: yellow; }
.two-colors {background: pink}

响应点击，选中红色和绿色复选框上的checked属性，只有当它们都为true时才显示div：

$('input[type="checkbox"]').click(function(){
    var red   = $("input[type=checkbox][value=red]")[0];
    var green = $("input[type=checkbox][value=green]")[0];
    $(".two-colors.box").toggle(red.checked && green.checked);
    // ...
});

请注意，该代码中的单个div条件也错误：复选框的value为始终为"blue"、"yellow"等。；更改的是是否选中复选框。因此，您可以使用值（this.value）查找要显示的div，并使用checked属性查找toggle:的参数

$("." + this.value).toggle(this.checked);

因此：

$('input[type="checkbox"]').click(function(){
    // Handle the combined one
    var red   = $("input[type=checkbox][value=red]")[0];
    var green = $("input[type=checkbox][value=green]")[0];
    $(".two-colors.box").toggle(red.checked && green.checked);
    // Handle the singles:
    $("." + this.value).toggle(this.checked);
});

（请注意，对于input元素，通常$(this).attr("value")在检查值时是不正确的；使用$(this).val()或仅使用this.value，因为在这种情况下我们不需要jQuery。value属性和value特性对于input元素来说是不一样的。）

实时示例：

$('input[type="checkbox"]').click(function() {
  // Handle the combined one
  var red = $("input[type=checkbox][value=red]")[0];
  var green = $("input[type=checkbox][value=green]")[0];
  $(".two-colors.box").toggle(red.checked && green.checked);
  // Handle the singles:
  $("." + this.value).toggle(this.checked);
});
.box {
  padding: 20px;
  display: none;
  margin-top: 20px;
  border: 1px solid #000;
}
.red {
  background: #ff0000;
}
.green {
  background: #00ff00;
}
.blue {
  background: #0000ff;
}
.yellow {
  background: yellow;
}
.two-colors {
  background: pink
}
<div>
  <label>
    <input type="checkbox" name="colorCheckbox" value="red">red</label>
  <label>
    <input type="checkbox" name="colorCheckbox" value="green">green</label>
  <label>
    <input type="checkbox" name="colorCheckbox" value="blue">blue</label>
  <label>
    <input type="checkbox" name="colorCheckbox" value="yellow">yellow</label>
</div>
<div class="red box">You have selected <strong>red checkbox</strong> so i am here</div>
<div class="green box">You have selected <strong>green checkbox</strong> so i am here</div>
<div class="blue box">You have selected <strong>blue checkbox</strong> so i am here</div>
<div class="yellow box">You have selected <strong>blue checkbox</strong> so i am here</div>
<div class="two-colors box">You have selected <strong>two colors</strong> so i am here</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

或者使用更多jQuery:；-）

$('input[type="checkbox"]').click(function(){
    // Handle the combined one
    var redChecked = $("input[type=checkbox][value=red]").is(":checked");
    var greenChecked = $("input[type=checkbox][value=green]").is(":checked");
    $(".two-colors.box").toggle(redChecked && greenChecked);
    // Handle the singles:
    var $this = $(this);
    $("." + $this.val()).toggle($this.is(":checked"));
});


$('input[type="checkbox"]').click(function(){
    // Handle the combined one
    var redChecked = $("input[type=checkbox][value=red]").is(":checked");
    var greenChecked = $("input[type=checkbox][value=green]").is(":checked");
    $(".two-colors.box").toggle(redChecked && greenChecked);
    // Handle the singles:
    var $this = $(this);
    $("." + $this.val()).toggle($this.is(":checked"));
});
.box {
  padding: 20px;
  display: none;
  margin-top: 20px;
  border: 1px solid #000;
}
.red {
  background: #ff0000;
}
.green {
  background: #00ff00;
}
.blue {
  background: #0000ff;
}
.yellow {
  background: yellow;
}
.two-colors {
  background: pink
}
<div>
  <label>
    <input type="checkbox" name="colorCheckbox" value="red">red</label>
  <label>
    <input type="checkbox" name="colorCheckbox" value="green">green</label>
  <label>
    <input type="checkbox" name="colorCheckbox" value="blue">blue</label>
  <label>
    <input type="checkbox" name="colorCheckbox" value="yellow">yellow</label>
</div>
<div class="red box">You have selected <strong>red checkbox</strong> so i am here</div>
<div class="green box">You have selected <strong>green checkbox</strong> so i am here</div>
<div class="blue box">You have selected <strong>blue checkbox</strong> so i am here</div>
<div class="yellow box">You have selected <strong>blue checkbox</strong> so i am here</div>
<div class="two-colors box">You have selected <strong>two colors</strong> so i am here</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

请注意，这假设只有值为red和green的复选框才是您关心的复选框。如果您需要进一步缩小范围，请给它们一个类或ID。

相关文章：