search

Home  >  Article  >  Web Front-end  >  Jquery operation radio, checkbox, select form operation implementation code_jquery

Jquery operation radio, checkbox, select form operation implementation code_jquery

WBOY
WBOYOriginal
2016-05-16 18:28:23888browse

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(""); //Append an Option (drop-down item) to Select
2. $("#select_id").prepend(""); //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.
Jquery operation radio, checkbox, select form operation implementation code_jquery
After running, please refresh to see the effect. Save it to run locally without any problems.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：How to close IE JS window silently without prompting_javascript skillsNext article：How to close IE JS window silently without prompting_javascript skills

Related articles

See more