checbox

Checkbox multiple

HTML

<div id="filterControls">
        <h3>Buy With: </h3>
            <label><input type="checkbox" value="cash" name="cash" class="check"/> Cash</label>
            <label><input type="checkbox" value="card" name="card" class="check"/> CreditCard</label>
            
            
            <label><input type="checkbox" value="us" name="us" class="check"/> us</label>
            <label><input type="checkbox" value="eu" name="eu" class="check"/> eu</label>
        </div>
        
        <div class="container">
        
        
        <div class=" box sectionContent us cash">
        <p>
        us cash
        </p>
        </div>
        
        <div class=" box sectionContent eu card">
        <p>
        Eu Card
        </p>
        </div>
        
        <div class=" box sectionContent us card">
        <p>
      us card
        </p>
        </div>
        
        <div class=" box sectionContent eu cash">
        <p>
        eu cash
        </p>
        </div>
        </div>

CSS

.box{
  width:100px;
  border:1px black solid;
}

JavaScript

$(document).ready(function(){
var sections = $('.sectionContent');
function updateContentVisibility(){
    var checked = $("#filterControls :checkbox:checked");
    if(checked.length){
        sections.fadeOut(400);
        checked.each(function(){
            $("." + $(this).val()).fadeIn(600);
        });
    } else {
        sections.fadeIn(500);
    }
}

$("#filterControls :checkbox").click(updateContentVisibility);
updateContentVisibility();

});