Question

任何人都可以帮忙吗？我想根据每个复选复选框的值显示div但是仅在检查了流感和咳嗽复选框时才会显示感冒和咳嗽。

HTML

<input type="checkbox" class="checkbox" value="flu"/>flu
<input type="checkbox" class="checkbox" value="cough"/>cough
<input type="checkbox" class="checkbox" value="fever"/>fever
<div class="item flu" >
flu
</div>
<div class="item cough">
cough
</div>
<div class="item fever">
fever
</div>
<div class="item flu cough">
flu + cough
</div>

jquery的

jQuery(document).ready(function(){

    var jQuerycheckboxes = jQuery('input[type="checkbox"]');
    var checkbox = jQuerycheckboxes.filter(':checked').val();


    jQuerycheckboxes.change(function(){
    var count = jQuerycheckboxes.filter(':checked').length;


for(i=0; i<count; i++){
  if(count===1){ 
   if (jQuery(jQuerycheckboxes).is(":checked")) {
  jQuery(".item." + this.value).show();

  }
}
}
    });
});

CSS

    .item{
  background-color:yellow;
  width:50px;
  height:50px;
  display:none;
}

Answer 1

你的回答：

$(document).ready(function() {
    $("input[type=checkbox]").click(function() {
        if (this.checked) $("div." + this.value).show();
        else $("div." + this.value).hide();
    });
}

Answer 2

＆＃13;

jQuery(document).ready(function(){
  $('.checkbox').on('click',function(){
  var tmpArr=[];
      $('.checkbox').each(function(){
          if($(this).is(':checked')){
          tmpArr.push($(this).val());
          }
        
      });
        if(($.inArray("flu",tmpArr)!=-1) && ($.inArray("cough",tmpArr)!=-1)&&(tmpArr.length==2)){
          $('.item').hide();
          $('.item').eq(3).show();
          }
           else if(($.inArray("flu",tmpArr)!=-1)&&(tmpArr.length==1)){
          $('.item').hide();
          $('.item').eq(0).show();
          }
          else if(($.inArray("cough",tmpArr)!=-1)&&(tmpArr.length==1)){
          $('.item').hide();
          $('.item').eq(1).show();
          }
          else if(($.inArray("fever",tmpArr)!=-1)&&(tmpArr.length==1)){
          $('.item').hide();
          $('.item').eq(2).show();
          }
          else{
          $('.item').hide();
          }
  });   
});

＆＃13;

.item{
  background-color:yellow;
  width:50px;
  height:50px;
  display:none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="checkbox" value="flu"/>flu
<input type="checkbox" class="checkbox" value="cough"/>cough
<input type="checkbox" class="checkbox" value="fever"/>fever
<div class="item flu" >
flu
</div>
<div class="item cough">
cough
</div>
<div class="item fever">
fever
</div>
<div class="item flu cough">
flu + cough
</div>

＆＃13;

Answer 3

srr，修改为：

$(document).ready(function() {
    $("input[type=checkbox]").click(function() {
        var selDiv = $("div." + this.value);
        var allChecked = true;
        var arrClass = selDiv.attr("class").split(" ");
        for (i = 0; i < arrClass.length; i++)
            if (arrClass[i] != "item")
                allCheck = allChecked && $("input[type=checkbox][value=" + arrClass[i] + "]")[0].checked;

        if (allChecked) selDiv.show(); else selDiv.hide();
    });
}

选中2复选框时显示特定div

3 个答案: