js操作checkbox,radio,select

最新推荐文章于 2023-12-18 20:44:22 发布

原创最新推荐文章于 2023-12-18 20:44:22 发布 · 95 阅读

0 ·

CC 4.0 BY-SA版权

JS 专栏收录该内容

42 篇文章

订阅专栏

本文提供了JavaScript操作HTML页面中Select下拉框、Checkbox复选框和Radio单选按钮的实用函数，包括获取值、设置选中状态等。适用于前端开发者快速实现表单交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近经常用JS操作 select checkbox 及radio 几个简单函数记录如下以备查用

Js代码
function getRadioValue(radioName){

var obj = document.getElementsByName(radioName);
var objLen= obj.length;
var i;
for (i = 0;i< objLen;i++){
if (obj [i].checked==true) {
return obj [i].value;
}
}
return "";
}

//获取复选框的值
function getCheckboxValue(radioName){
var obj = document.getElementsByName(radioName);
var objLen= obj.length;
var i;
var result="";
for (i = 0;i<objLen;i++){
if (obj [i].checked==true) {
result+=obj [i].value+",";
}
}
return result;
}

//复选框是否处于选中状态
function CheckboxToChecked(eleName, cValue){

var obj = document.getElementsByName(eleName);

var objLen= obj.length;
var i;
var result="";
for (i = 0;i<objLen;i++){

if (obj [i].value==cValue) {

obj [i].checked=true;
}else{
obj [i].checked=false;
}
}
return result;
}

//checkBox至少选中一项
function chkCheckBoxChs(objNam,txt){
var obj = document.getElementsByName(objNam);
var objLen= obj.length;
var num=0;
for (i = 0;i< objLen;i++){
if (obj [i].checked==true) {
num++;
}
}
if(num==0){
alert(txt);
return false;
}
return true;
}

function getRadioValue(radioName){

var obj = document.getElementsByName(radioName);
var objLen= obj.length;
var i;
for (i = 0;i< objLen;i++){
if (obj [i].checked==true) {
return obj [i].value;
}
}
return "";
}

//获取复选框的值
function getCheckboxValue(radioName){
var obj = document.getElementsByName(radioName);
var objLen= obj.length;
var i;
var result="";
for (i = 0;i<objLen;i++){
if (obj [i].checked==true) {
result+=obj [i].value+",";
}
}
return result;
}

//复选框是否处于选中状态
function CheckboxToChecked(eleName, cValue){

var obj = document.getElementsByName(eleName);

var objLen= obj.length;
var i;
var result="";
for (i = 0;i<objLen;i++){

if (obj [i].value==cValue) {

obj [i].checked=true;
}else{
obj [i].checked=false;
}
}
return result;
}

//checkBox至少选中一项
function chkCheckBoxChs(objNam,txt){
var obj = document.getElementsByName(objNam);
var objLen= obj.length;
var num=0;
for (i = 0;i< objLen;i++){
if (obj [i].checked==true) {
num++;
}
}
if(num==0){
alert(txt);
return false;
}
return true;
}

其他只读的属性的为 readOnly (注意大小写)

Js代码
function toReadOnly(ele ,flag){
var obj=document.getElementById(ele);
if(obj!=null){
if(flag==0){//可读
obj.readOnly=false;
obj.style.backgroundColor="white";
}else{//只读
obj.readOnly=true;
obj.value="";
obj.style.backgroundColor="#D8D8D8";
}
}
}

select操作
<html>

<body>
<script>
function test(){
var obj = document.getElementById("temp");

var value = obj.options[obj.selectedIndex].value;
alert(value);
}

</script>
<form>
<select name="cars" id="temp" onclick="test();">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

</body>
</html>

js获取select元素的value值和文本的方法

获得选中的对象

var selectobj = document.getElementById("selectId");

获得索引;

var　index = selectobj.selectedIndex;

获得选中的value的值

var value = selectobj.options[index].value

文本的值:

var text = selectobj.options[index].text