Summary of common control methods on jQuery action forms

This article summarizes the common control methods of jQuery operation form as an example. Share with you for your reference. The details are as follows:

The JS code below lists the common methods that jQuery USES to manipulate form controls (select, radiobox, checkbox)

Manipulate the html code for radio

Radion
<input type="radio" name="rd" id="rd1" checked="checked" value="rd1" />
<input type="radio" name="rd" id="rd2" value="rd2" />
<input type="radio" name="rd" id="rd3" value="rd3" />

1. To get the selected value, three methods can be used:

$('input:radio:checked').val();
$("input[type='radio']:checked").val();
$("input[name='rd']:checked").val();

2. Set the first Radio as the selected value:

$('input:radio:first').attr('checked', 'checked');

or

$('input:radio:first').attr('checked', 'true');

Note:

attr("checked",'checked')= attr("checked", 'true')= attr("checked",true)

3. Set the last Radio as the selected value:

$('input:radio:last').attr('checked', 'checked');

or

$('input:radio:last').attr('checked', 'true');

4. Set any 1 radio as the selected value according to the index value:

$('input:radio').eq( The index value ).attr('checked', 'true');

Index = 0,...
or

$('input:radio').slice(1,2).attr('checked', 'true');

5. Set Radio as the selected value according to Value value

$("input:radio[value='rd2']").attr('checked','true');

or

$('input:radio:checked').val();
$("input[type='radio']:checked").val();
$("input[name='rd']:checked").val();

0

6. Delete Radio with Value value of rd2

$("input:radio[value='rd2']").remove();

7. Delete the number Radio

$("input:radio").eq( The index value ).remove();

Index = 0,...
For example, delete the third Radio:

$('input:radio:checked').val();
$("input[type='radio']:checked").val();
$("input[name='rd']:checked").val();

3

8. Traversal Radio

$('input:radio:checked').val();
$("input[type='radio']:checked").val();
$("input[name='rd']:checked").val();

4

The following code demonstrates the common operation of DropDownList

$('input:radio:checked').val();
$("input[type='radio']:checked").val();
$("input[name='rd']:checked").val();

5

1. Get the Value value of the selected item:

$('input:radio:checked').val();
$("input[type='radio']:checked").val();
$("input[name='rd']:checked").val();

6

or

$('input:radio:checked').val();
$("input[type='radio']:checked").val();
$("input[name='rd']:checked").val();

7

Get the Text value of the selected item:

$('input:radio:checked').val();
$("input[type='radio']:checked").val();
$("input[name='rd']:checked").val();

8

or

$('input:radio:checked').val();
$("input[type='radio']:checked").val();
$("input[name='rd']:checked").val();

9

2. Get the index value of the currently selected item:

$('select#sel').get(0).selectedIndex;

3. Get the current maximum index value of option:

$('select#sel option:last').attr("index")

4. Get the length of DropdownList:

$('select#sel')[0].options.length;

or

$('select#sel').get(0).options.length;

5. Set the first option as the selected value:

$('select#sel option:first').attr('selected','true')

or

$('select#sel')[0].selectedIndex = 0;

6. Set the last option as the selected value:

$('input:radio:first').attr('checked', 'checked');

6

7. Set any 1 option as the selected value according to the index value:

$('input:radio:first').attr('checked', 'checked');

7

Index = 0,...
8. Set Value=4 to option as the selected value:

$('input:radio:first').attr('checked', 'checked');

8

or

$('input:radio:first').attr('checked', 'checked');

9

9. Delete Value=3 option:

$("select#sel option[value='3']").remove();

10. Delete the number of option:

$('input:radio:first').attr('checked', 'true');

1

Index = 0,...
For example, delete the third Radio:

$('input:radio:first').attr('checked', 'true');

2

11. Delete the first option:

$('input:radio:first').attr('checked', 'true');

3

or

$('input:radio:first').attr('checked', 'true');

4

12. Delete the last option:

$('input:radio:first').attr('checked', 'true');

5

13. Remove dropdownlist:

$('input:radio:first').attr('checked', 'true');

6

14. Add one option after select:

$('input:radio:first').attr('checked', 'true');

7

15. Add an option before select:

$('input:radio:first').attr('checked', 'true');

8

16. Traversing option:

$(' select#sel option ').each(function (index, domEle) {
// Write the code 
});

The following code demonstrates how jQuery commonly operates checkbox

attr("checked",'checked')= attr("checked", 'true')= attr("checked",true)

0

1. Get a single checkbox selected item (3 ways to write it) :

attr("checked",'checked')= attr("checked", 'true')= attr("checked",true)

1

or

attr("checked",'checked')= attr("checked", 'true')= attr("checked",true)

2

or

attr("checked",'checked')= attr("checked", 'true')= attr("checked",true)

3

2. Get multiple checkbox selected items:

attr("checked",'checked')= attr("checked", 'true')= attr("checked",true)

4

3. Set the first checkbox as the selected value:

attr("checked",'checked')= attr("checked", 'true')= attr("checked",true)

5

or

attr("checked",'checked')= attr("checked", 'true')= attr("checked",true)

6

4. Set the last checkbox as the selected value:

attr("checked",'checked')= attr("checked", 'true')= attr("checked",true)

7

or

attr("checked",'checked')= attr("checked", 'true')= attr("checked",true)

8

5. Set any 1 checkbox as the selected value according to the index value:

attr("checked",'checked')= attr("checked", 'true')= attr("checked",true)

9

Index = 0,...
or

$('input:radio:last').attr('checked', 'checked');

0

6. Select multiple checkbox:
Select checkbox for both the first and the second:

$('input:radio:last').attr('checked', 'checked');

1

7. Set checkbox as the selected value according to the value of Value:

$('input:radio:last').attr('checked', 'checked');

2

8. Delete Value=1 checkbox:

$('input:radio:last').attr('checked', 'checked');

3

9. Delete the number checkbox:

$('input:radio:last').attr('checked', 'checked');

4

Index = 0,...
For example, delete the third checkbox:

$('input:radio:last').attr('checked', 'checked');

5

10. Traversing checkbox:

$('input:radio:last').attr('checked', 'checked');

6

11. Select all

$('input:checkbox').each(function() {
$(this).attr('checked', true);
});

12. Cancel all selections:

$('input:checkbox').each(function () {
$(this).attr('checked',false);
});

I hope this article has been helpful to your jQuery programming.