javascript获取select,checkbox,radio的值
转发来自 博客园博主：肖品 博主的链接
1.获取和设置select,checkbox,radio的值
<!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="radio1" name="radio1" value="2">2
<input type="radio" id="radio1" 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">
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 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;
}
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>
<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="radio1" name="radio1" value="2">2
<input type="radio" id="radio1" 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">
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 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;
}
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>
2. JQuery 方式：
<!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="jquery-1.4.2.min.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="radio1" name="radio1" value="2">2
<input type="radio" id="radio1" 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>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="jquery-1.4.2.min.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="radio1" name="radio1" value="2">2
<input type="radio" id="radio1" 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>
本人小白，博客作为在线笔记，若有错误，还望指出，转载链接截图等皆为学习，若有侵权，请告知，
posted on 2017-11-08 12:25 xiaoxiaoyao61 阅读(359) 评论(0) 编辑 收藏 举报
