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>
-
专注iOS、Golang开发。
技术博客：http://xiaopin.cnblogs.com
分类:
Web Javascript
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· Ollama——大语言模型本地部署的极速利器
· [AI/GPT/综述] AI Agent的设计模式综述