Home > Web Front-end > JS Tutorial > body text

jquery implementation code to achieve the select all function effect_jquery

WBOY
Release: 2016-05-16 15:02:02
Original
1701 people have browsed it

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>
Copy after login

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

 }      

});
Copy after login

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.

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template