checkbox、select、radio的设置与获取
参考链接:http://www.cnblogs.com/xiaopin/archive/2011/09/13/2175190.html
js版本:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> </head> <body> 复选框: <input type="checkbox" name="checkbox1" value="1" checked/>1 <input type="checkbox" name="checkbox1" value="2"/>2 <input type="checkbox" name="checkbox1" value="3" checked/>3 <input type="checkbox" name="checkbox1" value="4"/>4 <input type="checkbox" name="checkbox1" value="5"/>5 <br/> 单选框: <input type="radio" id="radio1" name="radio1" value="1" checked>1 <input type="radio" id="radio2" name="radio1" value="2">2 <input type="radio" id="radio3" name="radio1" value="3">3 <br/> 下拉框: <select id="select1"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <br/> <button onclick="sub();">提交</button><br/> <button onclick="fun1();">选择4,5复选框</button><button onclick="fun1_2()">全选</button><br/> <button onclick="fun2();">选择3单选框</button><br/> <button onclick="fun3();">选择2下拉框</button><br/> <script type="text/javascript"> function fun1() { //复选框设置值 var oCheckbox = document.getElementsByName("checkbox1"); var arr = []; var index = 0; for (var i = 0; i < oCheckbox.length; i++) { if (oCheckbox[i].value == 4 || oCheckbox[i].value == 5) { oCheckbox[i].checked = true; } else { oCheckbox[i].checked = false; } } } function fun1_2() { //复选框设置值 var oCheckbox = document.getElementsByName("checkbox1"); for (var i = 0; i < oCheckbox.length; i++) { oCheckbox[i].checked = true; } } function fun2() { //单选框设置值 var oRadio = document.getElementsByName("radio1"); for (var i = 0; i < oRadio.length; i++) { if (oRadio[i].value == 3) { oRadio[i].checked = true; break; } } } function fun3() { //下拉框设置值 var oSelect = document.getElementById("select1"); oSelect.value = 2; //由option的text来选中选中 for (i = 0; i < oSelect.options.length; i++) { alert("Element " + i + " is " + oSelect.options(i).text + " and has the value " + oSelect.options(i).value); } oSelect.options(0).selected = true; } function sub() { //复选框获取值 var oCheckbox = document.getElementsByName("checkbox1"); var arr = []; var index = 0; for (var i = 0; i < oCheckbox.length; i++) { if (oCheckbox[i].checked) { arr[index++] = oCheckbox[i].value; } } alert("复选框:" + arr.toString()); //单选框获取值 var oRadio = document.getElementsByName("radio1"); var rvalue = 0; for (var i = 0; i < oRadio.length; i++) { if (oRadio[i].checked) { rvalue = oRadio[i].value; break; } } alert("单选框:" + rvalue); //下拉框获取值 var oSelect = document.getElementById("select1"); alert("下拉框:" + oSelect.value); } </script> </body> </html>
jQuery版本:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript" src="../js/jquery-1.10.2.js"></script> </head> <body> 复选框: <input type="checkbox" name="checkbox1" value="1" checked/>1 <input type="checkbox" name="checkbox1" value="2"/>2 <input type="checkbox" name="checkbox1" value="3" checked/>3 <input type="checkbox" name="checkbox1" value="4"/>4 <input type="checkbox" name="checkbox1" value="5"/>5 <br/> 单选框: <input type="radio" id="radio1" name="radio1" value="1" checked>1 <input type="radio" id="radio2" name="radio1" value="2">2 <input type="radio" id="radio3" name="radio1" value="3">3 <br/> 下拉框: <select id="select1"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <br/> <button onclick="sub();">提交</button><br/> <button onclick="fun1();">选择4,5复选框</button><br/> <button onclick="fun2();">选择3单选框</button><br/> <button onclick="fun3();">选择2下拉框</button><br/> <script type="text/javascript"> $(document).ready(function () { }); function fun1() { //复选框设置值 var oCheckbox = $("input[name=checkbox1]"); var arr = []; var index = 0; for (var i = 0; i < oCheckbox.length; i++) { if (oCheckbox[i].value == 4 || oCheckbox[i].value == 5) { oCheckbox[i].checked = true; } else { oCheckbox[i].checked = false; } } } function fun2() { //单选框设置值 var oRadio = $("input[name=radio1]"); for (var i = 0; i < oRadio.length; i++) { if (oRadio[i].value == 3) { oRadio[i].checked = true; break; } } } function fun3() { //下拉框设置值 var oSelect = $("#select1"); oSelect.val(2); } function sub() { //复选框获取值 var oCheckbox = $("input[name=checkbox1]"); var arr = []; var index = 0; for (var i = 0; i < oCheckbox.length; i++) { if (oCheckbox[i].checked) { arr[index++] = oCheckbox[i].value; } } alert("复选框:" + arr.toString()); //单选框获取值 var oRadio = $("input[name=radio1]"); var rvalue = 0; for (var i = 0; i < oRadio.length; i++) { if (oRadio[i].checked) { rvalue = oRadio[i].value; break; } } alert("单选框:" + rvalue); //下拉框获取值 var oSelect = $("#select1"); alert("下拉框:" + oSelect.val()); } </script> </body> </html>