Tout sélectionner/Ne rien sélectionner ne fonctionne pas sur les cases à cocher

Question

J'ai cherché des heures à ce sujet et lu les messages précédents, mais toujours pas de chance. Dans mon code, les pays individuels cochent et surlignent bien, mais je n'arrive pas à sélectionner tous/décocher tous les boutons pour faire quelque chose.

Mon résultat attendu est le suivant: le bouton Sélectionner tout (CountrySelectAll_ID_ws) doit cocher et mettre en évidence les 3 pays. Le bouton de désélection (CountrySelectNone_ID_ws) doit supprimer toutes les graduations et tous les points forts.

Quelqu'un a-t-il des suggestions?

J'ai un violon: http://jsfiddle.net/petg1bhb/

Mon code:

<input type="button" id="CountrySelectAll_ID_ws" value ='Tick all' /> 
<input type="button" id="CountrySelectNone_ID_ws" value ='UNtick' /> 

<div class="multiselect"> 
<br> 
<label><input type="checkbox" name="option[]" value="1" />Germany</label> 
<label><input type="checkbox" name="option[]" value="2" />France</label> 
<label><input type="checkbox" name="option[]" value="7" />Spain</label> 
</div> 




jQuery.fn.multiselect = function() { 
$(this).each(function() { 
    var checkboxes = $(this).find("input:checkbox"); 
    checkboxes.each(function() { 
     var checkbox = $(this); 
     // Highlight pre-selected checkboxes 
     if (checkbox.attr("checked")) 
      checkbox.parent().addClass("col-on"); 

     // Highlight checkboxes that the user selects 
     checkbox.click(function() { 
      if (checkbox.attr("checked")) 
       checkbox.parent().addClass("col-on"); 
      else 
       checkbox.parent().removeClass("col-on"); 
      alert$("option:selected"); 
     }); 
    }); 
}); 
}; 


$(function() { 
$(".multiselect").multiselect(); 
}); 


$(function() { 
$("#CountrySelectAll_ID_ws").on('click', function() 
$('.multiselect').find("input:checkbox").prop('checked',true); 
}) 
}); 


$(function() { 
$("#CountrySelectNone_ID_ws").on('click', function() 
{ 
$('.multiselect').find("input:checkbox").prop('checked',false); 
}) 
}); 

Answer 1

Voici un exemple de tic-tac et décochant toutes les cases de la div avec la mise en forme en surbrillance:

$('#CountrySelectAll_ID_ws').on('click', function(e) { 
 
    tickAll(true); 
 
}); 
 
$('#CountrySelectNone_ID_ws').on('click', function(e) { 
 
    tickAll(false); 
 
}); 
 

 
// click on any checkbox 
 
$('.multiselect input').on('click', function() { 
 
    var input = $(this).parent(); 
 
    if (input.hasClass('col-on')) { 
 
    input.removeClass('col-on'); 
 
    } else { 
 
    input.addClass('col-on'); 
 
    }       
 
}); 
 

 
// handle buttons       
 
function tickAll(status) { 
 
    $('.multiselect input').each(function(idx) { 
 
    $(this).prop('checked', status) 
 
    if(status) { 
 
     $(this).parent().addClass('col-on'); 
 
    } else { 
 
     $(this).parent().removeClass('col-on'); 
 
    } 
 
    }) 
 
};

.multiselect { 
 
    width: 20em; 
 
    height: 15em; 
 
    border: solid 1px #c0c0c0; 
 
    overflow: auto; 
 
} 
 
.multiselect label { 
 
    display: block; 
 
} 
 
.col-on { 
 
    color: #ffffff; 
 
    background-color: #000099; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="button" id="CountrySelectAll_ID_ws" value='Tick all' /> 
 
<input type="button" id="CountrySelectNone_ID_ws" value='UNtick' /> 
 

 
<div class="multiselect"> 
 
    <br> 
 
    <label> 
 
    <input type="checkbox" name="option[]" value="1" />Germany</label> 
 
    <label> 
 
    <input type="checkbox" name="option[]" value="2" />France</label> 
 
    <label> 
 
    <input type="checkbox" name="option[]" value="7" />Spain</label> 
 
</div>