Home >Web Front-end >JS Tutorial >jquery implementation code to achieve the select all function effect_jquery

jquery implementation code to achieve the select all function effect_jquery

WBOY
WBOYOriginal
2016-05-16 15:02:021720browse

Mainly to simulate tables in some web pages to achieve the select-all function.

<form>     

你爱好的运动是:    

<input type="checkbox" id="Check" value="全选/全不选"/>全选/全不选     <br />     

<input type="checkbox" name="items" value="足球" />足球     

<input type="checkbox" name="items" value="篮球" />篮球    

<input type="checkbox" name="items" value="羽毛球" />羽毛球     

<input type="checkbox" name="items" value="乒乓球" />乒乓球 

</form>

When we click the Select All/Deselect All button, the checkbox below performs the corresponding operation.

At the same time, conversely, when selecting all, if any checkbox below is not selected, the Select All/Unselect All button will not be selected.

 $('[name=items]:checkbox').click(function () {                 

var p = $('[name=items]:checkbox');        

 if(p.filter(':checked').length==p.length)        

{           //alert("Hello World");          

 $("#Check").attr("checked", true);        

} else {          

$("#Check").attr("checked", false);       

 }      

});

The above jquery implementation code to achieve the select all function effect is all the content shared by the editor. I hope it can give you a reference, and I hope you will support Script Home.

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn