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; } 

demo

$("#checkall").change(function () {     if ($(this).is(':checked')) {         $(".check").prop('checked', true);     }else{         $(".check").prop('checked', false);     }  }); 

demo

try one

demo updated

i added class selected span inorder check custom checkbox


Comments

Popular posts from this blog

resizing Telegram inline keyboard -

command line - How can a Python program background itself? -

php - "cURL error 28: Resolving timed out" on Wordpress on Azure App Service on Linux -