单选:
获取值:$("input[name='rdo']:checked").val();
设置值:$("input[name='rdo'][value='3']").prop("checked", true)
$("input[name='rdo']:eq(2)").prop("checked", true)
$("input[name='rdo']").eq(2).prop("checked", true)
$("input[name='rdo']").get(2).checked = true
多选:
获取值:
function getCheckedValues() { var arr = new Array(); $("input[name='chk']:checked").each(function() { arr.push($(this).val()); }); return arr.join(","); }
设置值:
$("input[name='chk']").val(["2", "3"])
$("input[name='chk']").val("2,3".split(","))
select单选:
获取值:$("#drp").val() 说明:.val()处理select元素, 当没有选择项被选中,它返回null
设置值:$("#drp").val(3)
select多选:
获取值: $("#selectDuo").val()
设置值:同上面的多选框
<html> <head> <title></title> <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <style type="text/css"> div { padding: 10px; } hr{border-bottom: solid 1px #ccc;line-height:10px;width:100%} </style> <script> //单选 begin****************************************************************** //获取单选值 function getRadioValue() { var val = $("#dan input[name='rdo']:checked").val(); $("#info").html(val); } //根据值或索引选中 function setRadioValue() { //1.根据值选中radio $("#dan input[name='rdo'][value='3']").prop("checked", true); //2.根据索引选中radio //$("#dan input[name='rdo']:eq(2)").prop("checked", true); //3.根据索引选中radio //$("#dan input[name='rdo']").eq(2).prop("checked", true); //4.根据索引选中radio //$("#dan input[name='rdo']").get(2).checked = true; } //单选 end****************************************************************** //多选 begin****************************************************************** //获取多选值,多个以逗号分隔 function getCheckboxValue() { var arr = new Array(); $("#duo input[name='chk']:checked").each(function () { arr.push($(this).val()); }); $("#info").html(arr.join(",")); } //设置多选 function setCheckboxValue() { //1.根据数组值选中 //$("#duo input[name='chk']").val(["2", "3"]); //2.根据字符串值选中 var vals = "2,3" $("#duo input[name='chk']").val(vals.split(",")); } //多选 end****************************************************************** //下拉*********************************************************************** function getSelectValue() { var val = $("#drp").val(); $("#info").html(val); //var val = $("#drp :checked").val(); } //设置多选 function setSelectValue() { var val = $("#drp").val("3"); } //select多选 begin************************************************************** function getSelectDuoValue() {
var val = $("#selectDuo").val();
$("#info").text(val);
} //设置多选 function setSelectDuoValue() { var val = $("#selectDuo").val(["2","3"]); } //select多选 end************************************************************** </script> </head> <body> <div style="color:#f00">结果:<span id="info" style="height:30px"></span></div> <div id="dan"> <input type="radio" name="rdo" id="radio1" value="1" />1 <input type="radio" name="rdo" id="radio2" value="2" />2 <input type="radio" name="rdo" id="radio3" value="3" />3 <input type="radio" name="rdo" id="radio4" value="4" />4 </div> <div> <input type="button" value="获取当前值" onclick="getRadioValue()" /> <input type="button" value="设置值为3的选中" onclick="setRadioValue()" /> </div> <hr /> <div id="duo"> <input type="checkbox" name="chk" id="checkbox1" value="1" />1 <input type="checkbox" name="chk" id="checkbox2" value="2" />2 <input type="checkbox" name="chk" id="checkbox3" value="3" />3 <input type="checkbox" name="chk" id="checkbox4" value="4" />4 </div> <div> <input type="button" value="获取当前值" onclick="getCheckboxValue()" /> <input type="button" value="设置值为2,3的选中" onclick="setCheckboxValue()" /> </div> <hr /> <div> <select id="drp"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select> </div> <div> <input type="button" value="获取当前值" onclick="getSelectValue()" /> <input type="button" value="设置值为3的选中" onclick="setSelectValue()" /> </div> <hr /> <div> <select id="selectDuo" multiple="multiple"> <option value="1">111111</option> <option value="2">222222</option> <option value="3">333333</option> <option value="4">444444</option> </select> </div> <div> <input type="button" value="获取当前值" onclick="getSelectDuoValue()" /> <input type="button" value="设置值为2,3的选中" onclick="setSelectDuoValue()" /> </div> </body> </html>