`

js操作checkbox,radio,select

    博客分类:
  • JS
 
阅读更多
最近经常用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


分享到:
评论

相关推荐

    LazyForm radio,checkbox,select样式自定义

    Radio和checkbox通常用于用户进行单选或多选操作,而select则用于下拉列表选择。在默认情况下,这些元素的样式受到浏览器的限制,往往显得单调且不一致。LazyForm允许开发者通过CSS和JavaScript来定制这些元素的外观...

    jquery操作Radio、Checkbox、Select Demo

    这些是jQuery对Radio、Checkbox和Select基本的操作方式。在实际应用中,你可能还需要结合DOM遍历、事件冒泡等知识,实现更复杂的交互功能。提供的Demo文件应该包含了这些操作的实例代码,通过查看和实践,可以加深...

    checkbox-radio-select样式自定义

    在前端开发中,`checkbox`、`radio`和`select`是三种常见的表单元素,它们用于用户交互,收集和提交数据。`checkbox`用于多选,`radio`用于单选,而`select`通常用于下拉列表选择。在本项目"checkbox-radio-select...

    js中的radio,checkbox,select例子

    一个小例子,含全选,有注释,学习一下这些表单元素的属性和方法

    jquery获取各种radio,checkbox,select的值等

    在JavaScript的世界里,jQuery库提供了一种简洁的方式来操作DOM元素,包括处理radio、checkbox和select。这些元素在网页表单中十分常见,用于收集用户输入。以下是对标题和描述中涉及的知识点的详细说明: 1. **...

    radio、checkbox、select等选择标签的总结

    在网页设计和开发中,`radio`、`checkbox` 和 `select` 是三种常见的表单元素,用于收集用户输入的数据。这些元素都是HTML语言的一部分,是构建交互式Web页面的关键工具。下面是对这三个标签的详细解释和总结: 1. ...

    Jquery操作radio,checkbox,select表单操作实现代码

    本篇文章将详细讲解如何使用jQuery来操作radio、checkbox和select这三个常见的表单元素。 一、Radio(单选按钮)操作 jQuery操作单选按钮(radio)主要涉及选取状态的读取与设置。例如,如果有一组同名的radio按钮...

    怎么获取checkbox/select/radio、选择中的text和value值

    在IT领域,特别是前端开发中,获取用户界面元素如`checkbox`、`select`和`radio`的选择状态是一项常见的需求。这些元素常用于收集用户的偏好或输入,因此准确地读取它们的`text`(显示文本)和`value`(实际值)对于...

    js checkbox radio

    JavaScript中的`checkbox`和`radio`提供了丰富的用户交互,允许用户进行多选或单选操作。通过JavaScript,我们可以轻松地获取和改变它们的状态,添加事件监听器,以及进行表单验证。熟练掌握这些技巧,将有助于创建...

    使用JQuery封装的Select&Checkbox&Radio脚本-维豪信息技术有限公司内部

    本文将深入探讨如何使用jQuery封装Select、Checkbox和Radio元素,以提高前端开发效率并确保跨浏览器兼容性。 一、jQuery封装Select 在HTML中,`&lt;select&gt;`元素用于创建下拉菜单。在jQuery中,我们可以方便地操作...

    jquery 获得select、radio、checkbox选择的text和value值

    ### jQuery 获取 Select、Radio、Checkbox 的 Text 和 Value 值详解 #### 一、Select 下拉框的操作 在网页开发中,`&lt;select&gt;` 标签用于创建下拉列表,通常用于用户输入时的选择操作。jQuery 提供了简单且强大的...

    Jquery 获取表单text,areatext,radio,checkbox,select值的代码

    jquery radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其相关 获取一组radio被选中项的值 var item = $(‘input[@name=items][@checked]’).val(); 获取select被选中项的文本 var ...

    Koo.js-标签式表单验证及初始化插件及演示支持select,checkbox,radio.zip

    Koo.js是一个专门针对这一需求设计的JavaScript插件,它提供了标签式的表单验证功能,并且对select、checkbox、radio等元素提供了良好的支持。下面我们将深入探讨Koo.js的核心特性和使用方法。 一、Koo.js简介 Koo...

    selectTree tree控件 日历控件 tree控件 radio CheckBox demo

    "selectTree tree控件 日历控件 tree控件 radio CheckBox demo"这个标题揭示了几个关键的组件,它们是网页交互中的重要元素。下面将详细介绍这些控件及其应用场景。 1. **selectTree(选择树控件)**: 选择树控件...

    jquery实现表单美化特效包括checkbox和radio美化特效插件

    一款非常强大的表单美化插件,点击颜色替换相应的checkbox和radio样式 多个选项来自定义checkbox和radio 8个回调函数支持 6个方法来编程控制 效果详情可参考http://www.xwcms.net/js/bddm/19041.html

    jQuery设置和获取select、checkbox、radio的选中值方法

    在众多表单元素中,select(下拉框)、checkbox(复选框)以及radio(单选按钮)是最常用的元素之一。jQuery作为一个功能强大的JavaScript库,其对这些表单元素的操作进行了极大的简化,提高了开发效率和用户体验。...

    Jquery 操作 Dom 标签 select

    特别是对于表单元素如 `select`、`radio` 和 `checkbox` 的操作,更是频繁出现。下面我们将详细介绍如何使用 jQuery 来获取和设置这些元素的状态。 #### 一、获取和设置 `select` 元素的值 `&lt;select&gt;` 标签用于...

Global site tag (gtag.js) - Google Analytics