Question

我想要show 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}

Answer 1

响应点击，检查红色和绿色复选框上的checked属性，只显示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"，{ {1}}等;是否选中该复选框会有什么变化。因此，您可以使用值（"yellow"）查找要显示的div，以及this.value参数的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()在这种情况下我们需要jQuery没什么特别的。this.value 属性和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
}

或者使用更多jQuery：; - ）

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

$('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的复选框才是您关心的。如果您需要进一步缩小范围，请给他们一个班级或ID。

如果选中多个复选框，我该如何添加事件？

1 个答案: