jquery - Javascript Check all the custom checkbox? -
i tried script, create custom checkbox name parameter.
function customcheckbox(checkboxname){ var checkbox = $('input[name="'+ checkboxname +'"]'); $(checkbox).each(function(){ $(this).wrap( "<span class='custom-checkbox'></span>" ); if($(this).is(':checked')){ $(this).parent().addclass("selected"); } }); $(checkbox).click(function(){ $(this).parent().toggleclass("selected"); }); } $(document).ready(function (){ customcheckbox("name1"); customcheckbox("name2"); })
display looks on css. want make checkbox checkall , uncheckall .. tried script ...
$("#checkall").click(function(){ $('input:checkbox').not(this).prop('checked', this.checked); });
only default checkbox successful. custom checkbox mine not working. please fix.
simple html
<label><input type='checkbox' id='checkall' name='name1' class='selectall' /></label> <label><input type="checkbox" name="name2" value="1" /> 1</label> <label><input type="checkbox" name="name2" value="2" /> 2</label> <label><input type="checkbox" name="name2" value="3" /> 3</label> <label><input type="checkbox" name="" value="4" /> 4</label> <label><input type="checkbox" name="" value="5" /> 5</label>
css :
.custom-checkbox{ width: 16px; height: 16px; display: inline-block; position: relative; z-index: 1; top: 3px; background: url("https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/26/unchecked_checkbox.png") no-repeat; } .custom-checkbox:hover{ background: url("https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/26/unchecked_checkbox.png") no-repeat; } .custom-checkbox.selected{ background: url("https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/26/checked_checkbox.png") no-repeat; } .custom-checkbox input[type="checkbox"]{ margin: 0; position: absolute; z-index: 2; cursor: pointer; outline: none; opacity: 0; /* css hacks older browsers */ _nofocusline: expression(this.hidefocus=true); -ms-filter: "progid:dximagetransform.microsoft.alpha(opacity=0)"; filter: alpha(opacity=0); -khtml-opacity: 0; -moz-opacity: 0; }
$("#checkall").change(function () { if ($(this).is(':checked')) { $(".check").prop('checked', true); }else{ $(".check").prop('checked', false); } });
try one
i added class selected span inorder check custom checkbox
Comments
Post a Comment