jquery Learning notes: Manipulating form element Two (check box and radio box)

Based on the above article, we describe how to manipulate check boxes and radio boxes in form elements.

One, check box

<label> <input type= "checkbox" id= "Item" checked> Select All </label>

Note that the input tag is placed in the label tag so that it is reflected when the text is clicked.

If selected, call $ ("#item"). Prop ("checked") returns True, otherwise false

You can also use the Prop method to select or deselect the checkboxes by using the JS code.

Second, radio button

1. Basic Concepts

<label><input type= "Radio" > Men </label>

<label><input type= "Radio" > Women </label>

2 radio buttons are given above. But found that both of them can be selected at the same time, this is not the same as the radio button usage scenarios. You can set the same name property for them so that they are treated as a group and the selected state is mutually exclusive. As in the following way:

<label><input type= "Radio" name= "Sex" > Men </label>

<label><input type= "Radio" name= "Sex" > Women </label>

Note that this mutex is only referred to under the same form. Radio buttons under different forms are not mutually exclusive, even if the name value is the same.

2 . Get the selected state of a single button

<label><input type= "Radio" id= "item" name= "Sex" > Male </label>

$ ("#item"). Prop ("checked")

3. For a set of buttons, get the selected button

The radio button's application scenario is to get or set the selected button in a group of buttons. This will first set a tag for each button. This is usually the Value property of the Set button. The Value property represents the button.

<form>

<label><input type= "Radio" name= "Sex" value= "man" > Male </label>

<label><input type= "Radio" name= "Sex" value= "Womon" > Women </label>

</form>

At this point, you need to set a different value for each radio so that you know which one is selected.

var obj = $ ("form input:checked"); Gets the selected button

Alert (Obj.val ()); The Val method returns the value of the selected button

Can be linked together $ ("Form input:checked"). Val ()//Gets the value of the selected button

Note that the Value property and the checked property have a completely different meaning. The Checked property represents whether the button has a selected state. The Value property is just a property of the button, and is used to identify a button, regardless of whether it is selected.

4. Get the corresponding button by the Value property

Using the JQuery property selector, you can get the button that corresponds to the value of the Values property. Once you get to the button, you can set the button to a selected state.

This scene is often encountered. For example, according to the information obtained by the server, to initialize the selected state of the button. Code such as:

<form>

<label><input type= "checkbox" Value= "man" > Male </label>

<label><input type= "checkbox" value= "Womon" > Women </label>

</form>

The code is as follows

var obj = $ ("Input[value= ' Man ']"); Gets the check box for the Value property of Man

Alert (Obj.prop ("checked")); Gets whether or not it is selected

Ob.prop ("Checked", true)//Select the radio button

As you can see, the combination of the Value property and the Checked property allows you to perform various operations on the radio button group.

jquery Learning notes: Manipulating form element Two (check box and radio box)