Home > Others

A method of realizing checkbox selection in Jquery _jquery

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Yesterday morning, I wrote about how to use jquery to make all the choices.

According to everyone's opinions on the procedures in some of the bad writing, but also the level of my limited, there are a variety of places to consider.

At the end of the article I raised a question, to write a general method to call, so I have the present article, the evening home, I wrote the effect

The following examples can be used to discuss learning, if you feel good can also be applied directly to the project.

1: Why write this method

Online to achieve a full selection of the whole election there are many, but it seems to ignore a problem, the checkbox can be selected to control the following child checkbox, but the following child checkbox should also be able to control the full selection, so that I have this method.

2: The development process: to achieve universal will solve 2 problems, how to group, how to determine which checkbox in the group for the full election, I think, think with the name group can,

Use class to determine whether a checkbox group that requires a full selection. Find all classes First and then find the Name property, and you can find the other child checkbox based on the Name property, as long as you find the element, you can do it.

3: File, the following is my implementation of JS, save for Xs_checkbox_all.js

Copy Code code as follows:

$ (document). Ready (function () {
var xschk = "Xschk";//Style defined
var xschkall = "input[type= ' checkbox '][class= '" + xschk + "'][name]";/all checkbox that defines this style
$ (Xschkall). each (function () {
var name = $ (this). attr ("name");
Name = "input[type= ' checkbox '][class!= '" + xschk + "'][name= '" + name + "']";//the Child checkbox under this full selection box
$ (this). Click (function () {
$ (name). attr ("Checked", $ (this) [0].checked);
})
var Xschk = $ (this);
$ (name). Click (function () {
var Iall = $ (name). length; The number of all the checkbox under this child item
var ichk = $ (name + ": Checked"). Length; The number of all checked checkboxes under this sub item
var isallchecked = true; Whether it is a full selection
if (Iall!= ichk) {
isallchecked = false;
}
$ (XSCHK). attr ("Checked", isallchecked);
});
});
});

Page Use

Copy Code code as follows:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title></title>
<body>
<script src= "Http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js" type= "Text/javascript" >
</script>
<script src= "Xs_checkbox_all.js" type= "Text/javascript" ></script>
<fieldset>
<legend> Full Selection one</legend>
<input type= "checkbox" class= "Xschk" name= "chk"/>
Select All
<div>
<input type= "checkbox" Name= "Chk"/>
1<br/>
<input type= "checkbox" Name= "Chk"/>
2<br/>
<input type= "checkbox" Name= "Chk"/>
3<br/>
<input type= "checkbox" Name= "Chk"/>
4<br/>
</div>
</fieldset>
<fieldset>
<legend> Full Selection two</legend>
<input type= "checkbox" class= "Xschk" name= "Chk1"/>
All options 2
<div>
<input type= "checkbox" Name= "Chk1"/>
11<br/>
<input type= "checkbox" Name= "Chk1"/>
22<br/>
<input type= "checkbox" Name= "Chk1"/>
33<br/>
<input type= "checkbox" Name= "Chk1"/>
44<br/>
</div>
</fieldset>
</body>

Can achieve results, if there is any optimization of the place, please put forward, I will do better, thank you, the above is the entire content of this article, I hope you can enjoy.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
jquery multiselect checkbox jquery create input checkbox selection books in order selection sort in c code meaning of static method in java selection tools in photoshop cs6 jquery find index of object in array

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More