Home > Developer > JavaScript
In Jquery, if there are parameters for these functions, they are value assignment operations. If there is no parameter, they are value operations. val () is a very important method, the form objects related to it, such as the input tag, select, and textarea, are all tag elements used for interaction with the server. Therefore, we need to clarify this val ();
Assign values to radio, checkbox, and select:
Copy codeThe Code is as follows:
$ ("Input [name = a]"). val (["Entertainment 1"]);
$ ("Input [type = checkbox]"). val (["basketball", "game"]);
$ ("Select"). val (["basketball", "game"]);
Code Analysis:
Assign a value to radio, and the attribute selector obtains radio;
Assign a value to the checkbox. The attribute selector obtains the checkbox. The value is enclosed in brackets []. If there are multiple values, separate them with commas;
Assign values to select, and obtain select using the tag selector,
Operation on the value of radio, checkbox, and select:
Copy codeThe Code is as follows:
Var checkvalue = "";
Var s = $ ("input [name = a]: checked"). val ();
$ (": Checkbox: checked"). each (function (){
Checkvalue + = $ (this). val ();
});
Var selectvalue = "";
$ ("Select: selected"). each (function (){
Selectvalue + = $ (this). val ();
});
Alert ("checkvalue:" + checkvalue + "radiovalue:" + s + "selectvalue:" + selectvalue );
Code Analysis:
Declare a variable of s to receive the elected value of radio of name = a. You can also write var s = $ (": radio: checked "). val (),: radio can be understood as the input element of type = radio, which is a simplified method of attribute selector;
Obtain the selected value of the checkbox. Because the checkbox is a multiple-choice box, you must use each to process each selected item. You can also write the following content based on the attribute selector: $ ("input [type = checkbox]: checked ");
When the select attribute is multiple = "multiple", you can select multiple options. Here, we also use each for traversal;
Summary:
For the tag elements of the input system, you can use the attribute selector to get: $ ("input [type = checkbox]"), or you can use the simple method: $ (": checkbox "), similar:
: Radio,: submit,: image,: reset,: button,: file,: hidden,: password,: text;
$ (": Input") select all <input> <textarea> <select> and <button> Elements
For radio and checkbox, use: checked to obtain the selected items, while for select, use: selected ($ ("select: selected"), $ (": radio: checked "). val ();)
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> </title>
<Script src = "../myjs/jquery-1.4.2-vsdoc.js" type = "text/javascript"> </script>
<Script type = "text/javascript">
$ (Function (){
$ (": Button [value = value]"). click (function (){
Var checkvalue = "";
// Var s = $ ("input [name = a]: checked"). val ();
Var s = $ (": radio: checked"). val ();
$ ("Input [type = checkbox]: checked"). each (function (){
Checkvalue + = $ (this). val ();
});
Var selectvalue = "";
$ ("Select: selected"). each (function (){
Selectvalue + = $ (this). val ();
});
Alert ("checkvalue:" + checkvalue + "radiovalue:" + s + "selectvalue:" + selectvalue );
});
$ (": Button [value = Setting]"). click (function (){
$ ("Input [name = a]"). val (["Entertainment 1"]);
$ ("Input [type = checkbox]"). val (["basketball", "game"]);
$ ("Select"). val (["basketball", "game"]);
});
});
</Script>
</Head>
<Body>
<Input type = "checkbox" id = "footbal" value = ""/> <label for = "footbal"> football </label> <br/>
<Input type = "checkbox" value = "basketball"/> basketball <br/>
<Input type = "checkbox" value = "reading"/> reading <br/>
<Input type = "checkbox" value = "game"/> games <br/> <Input type = "radio" name = "a" id = "B" value = "Entertainment 1"/> <label for = "B"> entertainment 1 </label> <br/>
<Input type = "radio" name = "a" value = "Entertainment 2"/> entertainment 2 <br/>
<Input type = "radio" name = "a" value = "Entertainment 3"/> entertainment 3 <br/>
<Hr/>
<Select multiple = "multiple">
<Option value = "basketball"> basketball </option>
<Option value = ""> football </option>
<Option value = "reading"> reading </option>
<Option value = "game"> game </option>
</Select>
<Input type = "button" value = "value"/> <input type = "button" value = "setting"/>
</Body>
</Html>
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
