We usually do the project when the operation of the form is unavoidable, using JS. Of course, we can also use jquery,jquery is a very good plug-in, simplifying the vast majority of JS, using it can be very easy to operate the form. Let's see how we can use jquery to determine whether a checkbox is selected
Method One:
if ($ ("#checkbox-id") get (0). checked) {
Do something
}
Method Two:
if ($ (' #checkbox-id '). Is (': Checked ')) {
Do something
}
Method Three:
if ($ (' #checkbox-id '). attr (' checked ')) {
Do something
}
Add
Gets the value of a set of radio selected items
var item = $ (' input[@name =items][@checked] '). Val ();
Gets the text of the Select selected item
var item = $ ("select[@name =items] option[@selected]"). Text ();
The second element of the Select Drop-down box is the currently selected value
$ (' #select_id ') [0].selectedindex = 1;
Radio the second element of a radio group is the currently selected value
$ (' input[@name =items] '). Get (1). checked = true;
Get Value:
text box, text area:
$ ("#txt"). attr ("value");
Multi-selection box checkbox:
$ ("#checkbox_id"). attr ("value");
Radio Group Radio:
$ ("input[@type =radio][@checked]"). Val ();
Dropdown box Select:
$ (' #sel '). Val ();
Control form elements:
text box, text area:
$ ("#txt"). attr ("Value", "");/empty content
$ ("#txt"). attr ("value", ' 11 ');//fill content
Multi-selection box checkbox:
$ ("#chk1"). attr ("Checked", "");/no tick.
$ ("#chk2"). attr ("Checked", true);/tick
if ($ ("#chk1"). attr (' checked ') ==undefined)//judge whether it has been ticked
Radio Group Radio:
$ ("input[@type =radio]"). attr ("Checked", ' 2 ');//Set value=2 item is currently selected
Dropdown box Select:
$ ("#sel"). attr ("value", '-sel3 ');//Set VALUE=-SEL3 item is currently selected
$ ("11112222"). Appendto ("#sel")//option to add a drop-down box
$ ("#sel"). empty ();//Empty Drop-down box
Example
But if we use jquery alert ($ ("#id"). attr ("Checked"), you will be prompted to be true instead of checked
So many friends judge if ($ ("#id"). attr ("checked") = = "true") This is wrong, in fact, it should be if ($ ("#id"). attr ("checked") ==true)
Examples include a few features.
<input type= "button" id= "BTN1" value= "Select All" >
<input type= "button" id= "Btn2" value= "deselect All" >
<input type= "button" id= "Btn3" value= "Select All Odd" >
<input type= "button" id= "Btn4" value= "anti-selection" >
<input type= "button" id= "Btn5" value= "Get All values selected" >
Code
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 transitional//en" >
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<script language= "JavaScript" src= "Http://www.cnjquery.com/demo/jquery.js" ></script>
<script language= "JavaScript" >
<!--
$ ("document"). Ready (function () {
$ ("#btn1"). Click (function () {
$ ("[name= ' checkbox ']"). attr ("Checked", ' true ');/select All
})
$ ("#btn2"). Click (function () {
$ ("[name= ' checkbox ']"). Removeattr ("checked");/Cancel All selection
})
$ ("#btn3"). Click (function () {
$ ("[name= ' checkbox ']:even"). attr ("Checked", ' true ');//Select All odd numbers
})
$ ("#btn4"). Click (function () {
$ ("[name= ' checkbox ']"). each (function () {
if ($ (this). attr ("checked"))
{
$ (this). Removeattr ("checked");
}
Else
{
$ (this). attr ("Checked", ' true ');
}
})
})
$ ("#btn5"). Click (function () {
var str= "";
$ ("[name= ' checkbox '][checked]"). each (function () {
str+=$ (This). Val () + "" R "N";
Alert ($ (this). Val ());
})
alert (str);
})
})
-->
</SCRIPT>
</HEAD>
<BODY>
<form name= "Form1" method= "Post" action= "" >
<input type= "button" id= "BTN1" value= "Select All" >
<input type= "button" id= "Btn2" value= "deselect All" >
<input type= "button" id= "Btn3" value= "Select All Odd" >
<input type= "button" id= "Btn4" value= "anti-selection" >
<input type= "button" id= "Btn5" value= "Get All values selected" >
<br>
<input type= "checkbox" name= "checkbox" value= "CheckBox1" >
CheckBox1
<input type= "checkbox" name= "checkbox" value= "CheckBox2" >
CheckBox2
<input type= "checkbox" name= "checkbox" value= "Checkbox3" >
Checkbox3
<input type= "checkbox" name= "checkbox" value= "Checkbox4" >
Checkbox4
<input type= "checkbox" name= "checkbox" value= "CHECKBOX5" >
Checkbox5
<input type= "checkbox" name= "checkbox" value= "checkbox6" >
Checkbox6
<input type= "checkbox" name= "checkbox" value= "CHECKBOX7" >
checkbox7
<input type= "checkbox" name= "checkbox" value= "Checkbox8" >
Checkbox8
</form>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
