The implementation code to get form elements through a filter in jquery _jquery

Source: Internet
Author: User
: Enable gets the element that can enter the state
:d isabled to get elements that cannot be entered
: Checked gets the selected form element
: Seleced Gets the selected element in the dropdown box
Let's look at an example
Html
Copy Code code as follows:

<body>
<form id= "Form1" runat= "Server" >
<div>
<ul>
<li><label> Order Number: </label><input type= "text" disabled= "disabled"/></li>
<li><label> Order Owner: </label><input type= "Text"/></li>
<li>
<input type= "checkbox" Name= "Ca" value= "Red"/> Red
<input type= "checkbox" Name= "Ca" value= "Yellow"/> Yellow
<input type= "checkbox" Name= "Ca" value= "Blue"/> Blue
<input type= "checkbox" Name= "Ca" value= "green"/> Green
</li>
<li>
<select multiple= "multiple" >
<option> Select 1</option>
<option> Select 2</option>
<option> Select 3</option>
<option> Select 4</option>
</select>
</li>
</ul>
</div>
</form> <div id= "MSG" >
<p id= "CC" ></p>
<p id= "option" ></p> </div>
</body>

JavaScript code:
Copy Code code as follows:

<script type= "Text/javascript" >
JQuery (function () {
$ ("input:text:disabled"). Val ("Cannot enter");
$ ("input:text:enabled"). Val ("can input");
(
function Checkboxclick () {
$ (": CheckBox"). Unbind ("click", Checkboxclick);
var vv= ';
$ (": checkbox:checked"). each (function () {
vv+=$ (This). Val () + ",";
});
$ ("#cc"). HTML ("Selected data:" +VV);
$ (": CheckBox"). Click (Checkboxclick);
}
)()
$ ("select"). Change (function () {
var tt= ';
$ ("Select Option:selected"). each (function () {
tt+=$ (This). Text () + ",";
});
$ ("#option"). HTML ("Selected item is:" +TT);
}). Trigger ("change");
});
</script>

Here are a few points to note:
1 in front of the word bind is used to bind events, then the unbind here is to cancel the event
The 2 trigger () method triggers the specified event type for the selected element.
3 when adding a function in jquery (function () {), add parentheses outside, followed by parentheses, as follows
JQuery (function () {
(
function Check ()
{
})()
})
4 The check box in the implementation layer is selected and assigned to other element values
Html
Copy Code code as follows:

<form id= "Form1" runat= "Server" >
<div>
<input type= "button" id= "btn1" value= "Eject"/>
<input type= "checkbox" Name= "Ca" value= "Red"/> Red
<input type= "checkbox" Name= "Ca" value= "Yellow"/> Yellow
<input type= "checkbox" Name= "Ca" value= "Blue"/> Blue
<input type= "checkbox" Name= "Ca" value= "green"/> Green
<input type= "checkbox" Name= "Ca" value= "white"/> White
<input type= "checkbox" Name= "Ca" value= "Black"/> Black
</div>
<div id= "CC" ></div>
</form>

Javascript
Copy Code code as follows:

JQuery (function () {
(
function Checkboxclick () {
$ (": CheckBox"). Unbind ("click", Checkboxclick);
var vv= ';
$ (": checkbox:checked"). each (function () {
vv+=$ (This). Val () + ",";
})
$ ("#cc"). HTML ("Selected data:" +VV);
$ (": CheckBox"). Click (Checkboxclick);
})()
})

The effect diagram is as follows:

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.

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

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