Home >Web Front-end >JS Tutorial >Value assignment implementation code for CheckBox, RadioButton, and DropDownList in Jquery_jquery
Since the version of Jquery is updated very quickly, the way of writing the code has also changed a lot. The following Jquery code is suitable for query1.4 and above
Radio
1. Get the selected value, Three methods are available:
$('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 value based on the index value A radio is the selected value:
$('input:radio').eq(index value).attr('checked', 'true'); index value=0,1,2....
Or
$('input:radio').slice(1,2).attr('checked', 'true');
5. Set Radio to the selected value according to the Value value
$(" input:radio[value='rd2']").attr('checked','true');
or
$("input[value='rd2']").attr('checked' ,'true');
6. Delete the Radio whose Value is rd2
$("input:radio[value='rd2']").remove();
7. Delete which number Radio
$("input:radio").eq(index value).remove(); index value=0,1,2....
If you delete the third Radio:$("input: radio").eq(2).remove();
8. Traverse Radio
$('input:radio').each(function(index,domEle){
//Write code
});
DropDownList
1. Get the selected item:
Get the Value of the selected item:
$('select #sel option:selected').val();
or
$('select#sel').find('option:selected').val();
Get the Text value of the selected item :
$('select#seloption:selected').text();
or
$('select#sel').find('option:selected').text();
2. Get the index value of the currently selected item:
$('select#sel').get(0).selectedIndex;
3. Get the maximum index value of the current 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 to the selected value:
$('select #sel option:last).attr('selected','true')
7. Set any option as the selected value based on the index value:
$('select#sel')[0].selectedIndex = Index value; index value=0,1,2....
8. Set the option with Value=4 as the selected value:
$('select#sel').attr('value','4 ');
or
$("select#sel option[value='4']").attr('selected', 'true');
9. Delete the option with Value=3:
$("select#sel option[value='3']").remove();
10. Delete the first few options:
$(" select#sel option ").eq( Index value).remove(); Index value=0,1,2....
If you want to delete the 3rd Radio:
$(" select#sel option ").eq(2).remove( );
11. Delete the first option:
$(" select#sel option ").eq(0).remove();
or
$("select#sel option: first").remove();
12. Delete the last option:
$("select#sel option:last").remove();
13. Delete dropdownlist:
$( "select#sel").remove();
14. Add an option after select:
$("select#sel").append("");
15. Add an option in front of select:
$("select#sel").prepend("");
16. Traverse options:
$(' select #sel option ').each(function (index, domEle) {
//Write code
});
CheckBox
1. Get a single checkbox selected item (three writing methods):
$("input:checkbox:checked").val()
or
$("input:[type='checkbox']:checked").val();
or
$("input:[name='ck']:checked").val() ;
2. Get multiple checkbox selected items:
$('input:checkbox').each(function() {
if ($(this).attr('checked') ==true ) {
alert($(this).val());
}
});
3. Set the first checkbox as the selected value:
$('input:checkbox:first').attr("checked",'checked');
or
$( 'input:checkbox').eq(0).attr("checked",'true');
4. Set the last checkbox as the selected value:
$('input:radio:last'). attr('checked', 'checked');
or
$('input:radio:last').attr('checked', 'true');
5. Set any value based on the index value A checkbox is the selected value:
$('input:checkbox).eq(index value).attr('checked', 'true'); index value=0,1,2....
or
$('input:radio').slice(1,2).attr('checked', 'true');
6. Select multiple checkboxes:
Select the 1st and 1st checkboxes at the same time 2 checkboxes:
$('input:radio').slice(0,2).attr('checked','true');
7. Set the checkbox to the selected value according to the Value value:
$("input:checkbox[value='1']").attr('checked','true');
8. Delete the checkbox with Value=1:
$("input:checkbox [value='1']").remove();
9. Delete which checkbox:
$("input:checkbox").eq(index value).remove(); index value= 0,1,2....
To delete the third checkbox:
$("input:checkbox").eq(2).remove();
10. Traverse the checkbox:
$('input:checkbox').each(function (index, domEle) {
//Write code
});
11. Select all
$('input:checkbox' ).each(function() {
$(this).attr('checked', true);
});
12. Deselect all:
$('input:checkbox' ).each(function () {
$(this).attr('checked',false);
});