JSFiddle - React, Tailwind, and code Playground

by Trisox

HTML

<div class="vakNaam">
    <label><input type="checkbox" name="erw" class="bestelAlles"> bestel alles</label>
    <label class="checkboxHolder"><input type="checkbox" name="wer"></label>
    <label class="checkboxHolder"><input type="checkbox" name="we3r"></label>
</div>    
<div class="vakNaam">
    <label><input class="bestelAlles" type="checkbox" name="43wer"> bestel alles</label>
    <label class="checkboxHolder"><input type="checkbox" name="wdfer"></label>
</div>

CSS

body{margin:20px;}
.vakNaam{padding:10px;}
.checkboxHolder{
    width:110px;
    height:28px;
    display:inline-block;
    background:url(http://www.vandijk.nl/webshop/images/btn_bestellen_on.gif);
}
.checkboxHolder.checked {background:url(http://www.vandijk.nl/webshop/images/btn_bestellen.gif);}
.checkboxHolder.unchecked {background:url(http://www.vandijk.nl/webshop/images/btn_bestellen_on.gif);}
.checkboxHolder input[type="checkbox"]{
    -moz-opacity:0; 
    -ms-filter:”alpha(opacity=0)”; 
    filter:alpha(opacity=0); 
    opacity:0; 
    -khtml-opacity:0; 
}

JavaScript

$('.checkboxHolder input[type="checkbox"]').click(function(){
    if($(this).is(':not(:checked)')){
        $(this).closest('.checkboxHolder').addClass('unchecked');
        $(this).closest('.checkboxHolder').removeClass('checked');
    }    
    if($(this).is(':checked')){
        $(this).closest('.checkboxHolder').addClass('checked');
        $(this).closest('.checkboxHolder').removeClass('unchecked');        
    }    
});


$(".bestelAlles").bind('click',function(){
   var vaknaam = $(this).closest('.vakNaam'); 
    if($(this).is(':checked')){
        $('.checkboxHolder input[type=checkbox]',vaknaam).each(function(index, value){
            $(this).attr('checked',true);
            $(value).closest('.checkboxHolder').addClass('checked');
            $(value).closest('.checkboxHolder').removeClass('unchecked');
        });        
    }
    if($(this).is(':not(:checked)')){
        $('.checkboxHolder input[type=checkbox]',vaknaam).each(function(index, value){
            $(this).attr('checked',false);
            $(value).closest('.checkboxHolder').addClass('unchecked');
            $(value).closest('.checkboxHolder').removeClass('checked'); 
        });    
    }    
});