Summary of common control methods for jQuery operation forms

Summary of common control methods for jQuery operation forms_jquery

WBOY

Release： 2016-05-16 16:07:58

Original

1020 people have browsed it

The examples in this article summarize the common control methods of jQuery operating forms. Share it with everyone for your reference. The details are as follows:

The following JS code lists common methods for jQuery to operate common controls on forms (including select, radiobox, checkbox). I believe there must be what you need

HTML code for radio operation

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" />

Copy after login

1. Get the selected value, three methods are available:

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

Copy after login

2. Set the first Radio as the selected value:

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

Copy after login

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

Copy after login

Note:

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

Copy after login

3. Set the last Radio as the selected value:

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

Copy after login

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

Copy after login

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

$('input:radio').eq(索引值).attr('checked', 'true');

Copy after login

Index value=0,1,2....
or

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

Copy after login

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

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

Copy after login

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

Copy after login

6. Delete the Radio whose Value is rd2

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

Copy after login

7. Which Radio to delete

$("input:radio").eq(索引值).remove();

Copy after login

Index value=0,1,2....
If you want to delete the 3rd Radio:

$("input:radio").eq(2).remove();

Copy after login

8. Traverse Radio

$('input:radio').each(function(index,domEle){
//写入代码
});

Copy after login

The following code demonstrates the common operation methods of DropDownList

DropDownList
<select id="sel">
<option value="1" selected="selected">a</option>
<option value="2">b</option>
<option value="3">c</option>
<option value="4">d</option>
<option value="5">e</option>
</select>

Copy after login

1. Get the Value of the selected item:

$('select#sel option:selected').val();

Copy after login

$('select#sel').find('option:selected').val();

Copy after login

Get the Text value of the selected item:

$('select#seloption:selected').text();

Copy after login

$('select#sel').find('option:selected').text();

Copy after login

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

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

Copy after login

3. Get the maximum index value of the current option:

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

Copy after login

4. Get the length of DropdownList:

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

Copy after login

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

Copy after login

5. Set the first option as the selected value:

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

Copy after login

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

Copy after login

6. Set the last option as the selected value:

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

Copy after login

7. Set any option as the selected value based on the index value:

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

Copy after login

Index value=0,1,2....
8. Set the option with Value=4 as the selected value:

$('select#sel').attr('value','4');

Copy after login

$("select#sel option[value='4']").attr('selected', 'true');

Copy after login

9. Delete the option with Value=3:

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

Copy after login

10. Which option should be deleted:

$(" select#sel option ").eq(索引值).remove();

Copy after login

Index value=0,1,2....
If you want to delete the 3rd Radio:

$(" select#sel option ").eq(2).remove();

Copy after login

11. Delete the first option:

$(" select#sel option ").eq(0).remove();

Copy after login

$("select#sel option:first").remove();

Copy after login

12. Delete the last option:

$("select#sel option:last").remove();

Copy after login

13. Delete dropdownlist:

$("select#sel").remove();

Copy after login

14. Add an option after select:

$("select#sel").append("<option value='6'>f</option>");

Copy after login

15. Add an option in front of select:

$("select#sel").prepend("<option value='0'>0</option>");

Copy after login

16. Traverse options:

$(' select#sel option ').each(function (index, domEle) {
//写入代码
});

Copy after login

The following code demonstrates jQuery’s common methods of operating checkboxes

CheckBox
<input type="checkbox" id="ck1" name="ck" vlaue="1" checked="checked" />
<input type="checkbox" id="ck2" name="ck" vlaue="2" />
<input type="checkbox" id="ck3" name="ck" vlaue="3" />
<input type="checkbox" id="ck4" name="ck" vlaue="4" />

Copy after login

1. Get a single checkbox selected item (three writing methods):

$("input:checkbox:checked").val()

Copy after login

$("input:[type='checkbox']:checked").val();

Copy after login

$("input:[name='ck']:checked").val();

Copy after login

2. Get multiple checkbox selected items:

$('input:checkbox').each(function() {
if ($(this).attr('checked') ==true) {
alert($(this).val());
}
});

Copy after login

3. Set the first checkbox as the selected value:

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

Copy after login

$('input:checkbox').eq(0).attr("checked",'true');

Copy after login

4. Set the last checkbox as the selected value:

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

Copy after login

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

Copy after login

5. Set any checkbox as the selected value based on the index value:

$('input:checkbox).eq(索引值).attr('checked', 'true');

Copy after login

Index value=0,1,2....
or

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

Copy after login

6. Select multiple checkboxes:
Select the 1st and 2nd checkboxes at the same time:

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

Copy after login

7. Set the checkbox to the selected value based on the Value value:

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

Copy after login

8. Delete the checkbox with Value=1:

$("input:checkbox[value='1']").remove();

Copy after login

9. Which checkbox to delete:

$("input:checkbox").eq(索引值).remove();

Copy after login

Index value=0,1,2....
To delete the third checkbox:

$("input:checkbox").eq(2).remove();

Copy after login

10.遍历checkbox：

$('input:checkbox').each(function (index, domEle) {
//写入代码
});

Copy after login

11.全部选中

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

Copy after login

12.全部取消选择：

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

Copy after login

希望本文所述对大家的jQuery程序设计有所帮助。