Jquery operation radio, checkbox, select form operation implementation code_jquery

1. Select
jQuery gets the Text and Value selected by Select:
1. $("#select_id").change(function(){//code...} ); //Add an event for Select, triggered when one of the items is selected
2. var checkText=$("#select_id").find("option:selected").text(); //Get the Select selection Text
3. var checkValue=$("#select_id").val(); //Get the Value selected by Select
4. var checkIndex=$("#select_id ").get(0). selectedIndex; //Get the index value selected by Select
5. var maxIndex=$("#select_id option:last").attr("index"); //Get the maximum index value of Select

jQuery sets the Text and Value selected by Select:
1. $("#select_id ").get(0).selectedIndex=1; //Set the item with Select index value 1 to select
2. $(" #select_id ").val(4); //Set the Select value to 4 to select the item
3. $("#select_id option[text='jQuery']").attr("selected", true ); //Set the Text value of Select to the jQuery item selected

jQuery adds/delete the Option item of Select:
1. $("#select_id").append("Text"); //Append an Option (drop-down item) to Select
2. $("#select_id").prepend(" Please select"); //Insert an Option (first position) for Select
3. $("#select_id option:last").remove(); //Delete the index value in Select Maximum Option (last one)
4. $("#select_id option[index='0']").remove(); //Delete the Option with index value 0 in Select (first one)
5. $("#select_id option[value='3']").remove(); //Delete the Option with Value='3' in Select
6. $("#select_id option[text='4 ']").remove(); //Delete the Option with Text='4' in Select
7. $("#SelectID").remove(); //Delete all items

2. Checkbox
Select/Cancel
jQuery.attr Get/set the attribute value of the object, such as:
$("input[name='chk_list']").attr( "checked"); //Read the status of all objects named 'chk_list' (whether selected)
$("input[name='chk_list']").attr("checked",true); // Set checked to true for all objects named 'chk_list'
$("#img_1").attr("src","test.jpg"); //Set the value of src whose ID is img_1 For 'test.jpg'
$("#img_1").attr("src"); //Read the src value of ID img_1
The following code is to obtain the selection in the above example The value of the checkbox:


1, get checkbox value
$("#checkboxID").value or $("input[type='checkbox']").eq(n).attr("checked").value
2, set the selected item
$("input[type='checkbox']").eq(1).attr("checked")//Set the first checkbox as the selected item
3, delete all checkboxes
$("input[type='checkbox']").remove()
4,checkbox method
$(document).ready(function() {
var check = $("input[type ='checkbox']");
check.each(function(n) {
check.eq(n).bind("click", function() {
if (check.eq(n ).attr("checked") != false) {
var value = check.eq(n).val();
alert(value);
}
else {
alert(check.eq(n).attr("checked"));
}
})
});
});

3. radio
1, get the selected value
$("input[type='radio']:checked").val();
2, set the specified item as the currently selected item
$("input[type='radio']").eq(1).attr("checked", true);//Set the second item as the selected item
$("input[type=' radio'][value='value']").attr("checked, true");

3, solve multiple Radios

$("input[type='radio' ][@name='rdoTest2']").eq(0).attr("checked", true);
Study notes for later use.

After running, please refresh to see the effect. Save it to run locally without any problems.

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>Jquery operates radio, checkbox, select</title> <table width="300" border="1" cellspacing="1" cellpadding="1"> <tr> <td width="30%" align="center"> </td> <td width="60%">Username: <input type="text" id="uname"> </td> <td width="10%"> <div style="color:#F00" id="err"> </div> <script src="http://img.jb51.net/jslib/jquery/jquery14.js"></script><script type="text/javascript"> $(function(){ $('#uname').blur(function(){ if($('#uname').val()=='') { $('#err').html('*'); } else { $('#err').html(''); } }); $('#see').click(function(){ if($('#uname').val()=='') { $('#err').html('*'); } else { $('#err').html(''); $('#name').html($('#uname').val()); } //$('#xingbie').html($(':radio:checked').val()); $('#xingbie').html($("[name='aa']:checked").val()); var str=""; $("[name='bbb']:checked").each(function(){ str+=$(this).val()+" "; }); $('#shengfen').html(str); //$('#nianfen').html($('#nf').find('option:selected').text());//text $('#nianfen').html($('#nf').find('option:selected').val());//value }); $('#quan').click(function(){ $("[name='ccc']").attr('checked','true'); }); $('#buxuan').click(function(){ $("[name='ccc']").removeAttr('checked'); }); $('#fan').click(function(){ $("[name='ccc']").each(function(){ if($(this).attr("checked")) { $(this).removeAttr("checked"); } else { $(this).attr("checked",'true'); } }); }); $('#kan').click(function(){ var ss=""; $("[name='ccc']:checked").each(function(){ ss+=$(this).val()+" "; }); $('#seee').html(ss); }); }); </script> </td> </tr> <tr> <td align="center">Gender: </td> <td><input name="aa" type="radio" id="ta1" value=""></td> </tr> </table>