Jqueryはチェックボックスに基づいて特定の要素を表示します

Question

対応する名前のチェックボックスをオンにすると、特定の名前の特定のdivのみを表示しようとしています。

私は現在、次のコードをしている：

$(".checkbox").change(function() { 
    var checkbox = $(this).val(); 

    if ($(".item").hasClass(checkbox)) { 
     if ($(this).is(":checked")) { 
      $(".item." + checkbox).show(); 
     } else { 
      $(".item." + checkbox).hide(); 
     } 
    } 
}); 

上記のコードは次のようん：私は「業界」の名前でのチェックボックスをチェックすると、それはまた、クラスでのdivが表示されます」.item .industry 'また、チェックボックスに「office」という名前を付けると、部門名として「.industry」と「.office」の両方のdivがすべて表示されます（「.item .industry .office」）。

ここで、「all」という名前のチェックボックスも追加します。これはデフォルトの状態で、クラス '.item'を持つすべてのdivを表示する必要があります。他のチェックボックスの1つがチェックされている場合は、チェックボックスのチェックボックスと同じ名前のdivだけを表示し、 'all'をオフにする必要があります。私はまた、これとは逆の働きをしたい。すべてがチェックされていないときは自動的にすべてをチェックします（そうでなければdivは表示されません）。

私が試したのは、すべての.item divに余分なクラス（ '.all'）を付けることです。すべてのチェックボックスにも値「all」がありますが、何らかの理由でこれが正しく機能しません。

Answer 1

見て、そのクリスマスとサンタは、いくつかのコードを持って来た！

HTML

<div> 
    <label for="industry"> 
    Industry 
    <input class="checkbox single" type="checkbox" value="industry" name="industry" id="industry" checked> 
    </label> 
    <label for="office"> 
    Office 
    <input class="checkbox single" type="checkbox" value="office" name="office" id="office" checked> 
    </label> 
    <label for="all"> 
    All 
    <input class="checkbox all" type="checkbox" value="all" name="all" id="all" checked> 
    </label> 
</div> 

<div class="item industry"> 
    <h4> 
    Industry 
    </h4> 
</div> 
<div class="item office"> 
    <h4> 
    Office 
    </h4> 
</div> 

はJavaScript

$(".checkbox").change(function() { 
    var $self  = $(this), 
     checkboxVal = $self.val(), 
     selector = checkboxVal === "all" ? ".item" : ".item." + checkboxVal; 

    // Show or hide divs based on selector, for example: 
    // $(".item").show() will show all items while 
    // $(".item.industry").show() will only show the industry div 
    if ($self.is(":checked")) { 
    $(selector).show(); 
    } else { 
    $(selector).hide(); 
    } 

    // This part is optional but it feels awkward without. 
    // If the changed checkbox is the "all" checkbox, we want all checkboxes 
    // to be checked. Vice versa if we click a single checkbox we want 
    // the "all" checkbox to react accordingly 
    if (checkboxVal === "all") { 
    $(".checkbox.single").prop("checked", $self.is(":checked")); 
    } else { 
    if ($(".checkbox.single:checked").length === $(".checkbox.single").length) { 
     $(".checkbox.all").prop("checked", true); 
    } else { 
     $(".checkbox.all").prop("checked", false); 
    } 
    } 
}); 

Use this fiddle to play aroundが、次回は、あなたが感じ:)

Answer 2

"私はあなたのcodemonkeyないよ" 防ぐために、もう少しコードを提供する必要がありますarrayとmapを使用することもできます。それはfiddle

JS役立つことがあります。ここでは

var array = $("input[type='checkbox']").map(function(){ 
 
    if($(this).val() != 'all') 
 
    return $(this).val(); 
 
    else 
 
    return null; 
 
    }); 
 
    
 
$("input[type='checkbox']").change(function() { 
 
    var checkbox = $(this).val(); 
 
    var count = 0; 
 
    if ($(".item").hasClass(checkbox)) { 
 
     if ($(this).is(":checked")) { 
 
      $(".item." + checkbox).show(); 
 
     } else { 
 
      $(".item." + checkbox).hide(); 
 
     } 
 
    } 
 
    else 
 
    { 
 
    if ($(this).is(":checked")) { 
 
      $("input[type='checkbox']").prop("checked","checked"); 
 
    $("div").show(); 
 
     } else { 
 
      $("input[type='checkbox']").prop("checked",""); 
 
    $("div").hide(); 
 
     } 
 
    } 
 
    
 
    $("input[type='checkbox']").each(function(){ 
 
    if($(this).is(':checked')) 
 
    { 
 
    if($.inArray($(this).val(), array) > -1) 
 
    { 
 
    count++; 
 
    } 
 
    } 
 
    }); 
 
    
 
    if(array.length == count && checkbox !='all') 
 
    { 
 
    $("input[type='checkbox']").prop("checked","checked"); 
 
    $("div").show(); 
 
    } 
 
    if(array.length > count) 
 
    { 
 
    $("input[type='checkbox'][value='all']").prop("checked",""); 
 
    } 
 
});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<input type="checkbox" value="all"/> 
 
<input type="checkbox" value="industry"/> 
 
<input type="checkbox" value="Company"/> 
 
<input type="checkbox" value="mill"/> 
 
<div class="item industry"> 
 
industry 
 
</div> 
 
<div class="item Company"> 
 
Company 
 
</div> 
 
<div class="item mill"> 
 
mill 
 
</div>

Answer 3

を主にjQueryのメソッド（プラスthis.checked DOMメソッドの非常に軽いsprinking）を使用して、一つのアプローチです：

$(document).ready(function() { 
 

 
    $('input[value="all"]').prop('checked', true); 
 
    $('input[value^="box-"]').prop('checked', false); 
 
    
 
    $('input[value^="box-"]').change(function(){ 
 
     $('input[value="all"]').prop('checked', false); 
 

 
     $('input[value^="box-"]').each(function(){ 
 
      var uncheckedCount = 0; 
 
      var checkValue = $(this).val(); 
 
      $('div').hide(); 
 

 
      $('input[value^="box-"]').each(function(){ 
 
       var box = $(this).val(); 
 
       if (this.checked) { 
 
        $('.' + box).show(); 
 
       } 
 

 
       else { 
 
        uncheckedCount++; 
 
       } 
 

 
       if (uncheckedCount === $('input[value^="box-"]').length) { 
 
        $('input[value="all"]').prop('checked', true); 
 
        $('div').show(); 
 
       } 
 
      }); 
 
     }); 
 
    }); 
 

 
    $('input[value="all"]').change(function(){ 
 
     $('input[value^="box-"]').prop('checked', false); 
 
     $('input[value="all"]').prop('checked', true); 
 
     $('div').show(); 
 
    }); 
 
});

div { 
 
display: inline-block; 
 
width:100px; 
 
height:100px; 
 
margin-top: 24px; 
 
font-weight: bold; 
 
text-align: center; 
 
line-height: 100px; 
 
color: rgb(255,255,255); 
 
background-color:rgb(255,0,0); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<input type="checkbox" value="all" checked />All 
 
<input type="checkbox" value="box-a" />Box A 
 
<input type="checkbox" value="box-b" />Box B 
 
<input type="checkbox" value="box-c" />Box C 
 
<br /> 
 

 
<div class="box-a">Box A Div</div> 
 
<div class="box-b">Box B Div</div> 
 
<div class="box-c">Box C Div</div>