最近经常用JS操作 select checkbox 及radio 几个简单函数记录如下 以备查用
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 (注意大小写)
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 是网上转载的
1.判断select选项中 是否存在Value="paraValue"的Item
2.向select选项中 加入一个Item
3.从select选项中 删除一个Item
4.修改select选项中 value="paraValue"的text为"paraText"
5.设置select中text="paraText"的第一个Item为选中
6.设置select中value="paraValue"的Item为选中
7.得到select的当前选中项的value
8.得到select的当前选中项的text
9.得到select的当前选中项的Index
10.清空select的项
-------------------------------------------
//1.判断select选项中 是否存在Value="paraValue"的Item
function jsSelectIsExitItem(objSelect,objItemValue)
{
var isExit = false;
for(var i=0;i<objSelect.options.length;i++)
{
if(objSelect.options[i].value == objItemValue)
{
isExit = true;
break;
}
}
return isExit;
}
//2.向select选项中 加入一个Item
function jsAddItemToSelect(objSelect,objItemText,objItemValue)
{
//判断是否存在
if(jsSelectIsExitItem(objSelect,objItemValue))
{
alert("该Item的Value值已经存在");
}
else
{
var varItem = new Option(objItemText,objItemValue);
// objSelect.options[objSelect.options.length] = varItem;
objSelect.options.add(varItem);
alert("成功加入");
}
}
//3.从select选项中 删除一个Item
function jsRemoveItemFromSelect(objSelect,objItemValue)
{
//判断是否存在
if(jsSelectIsExitItem(objSelect,objItemValue))
{
for(var i=0;i<objSelect.options.length;i++)
{
if(objSelect.options[i].value == objItemValue)
{
objSelect.options.remove(i);
break;
}
}
alert("成功删除");
}
else
{
alert("该select中 不存在该项");
}
}
//4.修改select选项中 value="paraValue"的text为"paraText"
function jsUpdateItemToSelect(objSelect,objItemText,objItemValue)
{
//判断是否存在
if(jsSelectIsExitItem(objSelect,objItemValue))
{
for(var i=0;i<objSelect.options.length;i++)
{
if(objSelect.options[i].value == objItemValue)
{
objSelect.options[i].text = objItemText;
break;
}
}
alert("成功修改");
}
else
{
alert("该select中 不存在该项");
}
}
//5.设置select中text="paraText"的第一个Item为选中
function jsSelectItemByValue(objSelect,objItemText)
{
//判断是否存在
var isExit = false;
for(var i=0;i<objSelect.options.length;i++)
{
if(objSelect.options[i].text == objItemText)
{
objSelect.options[i].selected = true;
isExit = true;
break;
}
}
//Show出结果
if(isExit)
{
alert("成功选中");
}
else
{
alert("该select中 不存在该项");
}
}
//6.设置select中value="paraValue"的Item为选中
document.all.objSelect.value = objItemValue;
//7.得到select的当前选中项的value
var currSelectValue = document.all.objSelect.value;
//8.得到select的当前选中项的text
var currSelectText = document.all.objSelect.options[document.all.objSelect.selectedIndex].text;
//9.得到select的当前选中项的Index
var currSelectIndex = document.all.objSelect.selectedIndex;
//10.清空select的项
document.all.objSelect.options.length = 0;
分享到:
相关推荐
Koo.js-标签式表单验证及初始化插件及演示支持select,checkbox,radio.zip
一款非常强大的表单美化插件,点击颜色替换相应的checkbox和radio样式 多个选项来自定义checkbox和radio 8个回调函数支持 6个方法来编程控制 效果详情可参考http://www.xwcms.net/js/bddm/19041.html
一个小例子,含全选,有注释,学习一下这些表单元素的属性和方法
jquery radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其相关 获取一组radio被选中项的值 var item = $(‘input[@name=items][@checked]’).val(); 获取select被选中项的文本 var ...
表单checkbox多选框选择特效是一款多选框美化特效。
bug描述 当象下例中那样操作了表单radio/checkbox的DOM结构时(或者直接影响了他们的结构时)选中的checkbox/radio将会自动恢复到默认状态,有如点了reset按钮一样。 Rank’s HTML document /**/ IE form ...
内含: JavaScript语言参考手册.pdf (主要资源) 另外附上: ...netscape.javascript.JSObject 方法和静态方法 netscape.javascript.JSException 构造函数 netscape.plugin.Plugin 构造函数和方法 索引
jQuery获取Select选择的Text和Value: 语法解释: 1. $(“#select_id”).change(function(){//code…}); //为Select添加事件,当选择其中一项时触发 2. var checkText=$(“#select_id”).find(“option:selected”)...
主要特色: 完全响应式; 完美键盘操作支持; 可定制的输入标签:select, radio, checkbox 以及 file; 自定义的日期选择器 本地化支持 表单验证的代码示例:
【下一章】 【索引】 【这是目录】 ---------------------------------------...netscape.javascript.JSObject 方法和静态方法 netscape.javascript.JSException 构造函数 netscape.plugin.Plugin 构造函数和方法
ui-choose是一款基于jquery的列表选择美化插件。ui-choose可用于选项不太多的select、radio、checkbox等,提升用户体验。
在Web开发中,要经常操作表单元素,如input输入框,select下拉选择框,radio单选按钮,checkbox复选框等。这个包含了常用表单元素操作的代码。
下面的JS代码列出了jQuery操作表单常用控件(包括select,radiobox,checkbox)的常用方法,相信一定有你需要的 操作radio的html代码 Radion <input type="radio" name="rd" id="rd1" checked="checked" value=...
本文分别介绍了js和jQuery验证单选框(radio)、多选框(checkbox)、下拉框(select),分享给大家供大家参考,具体内容如下 (1).首先说单选框(radio),radio和checkbox一样都是name相同值有多个在获取 radio 值的时候...
Checkbox elements[]; Element Hidden Password Radio Reset Select options[]; Option Submit Text Textarea images[]; Image 浏览器对象 屏幕对象 窗口对象 ...
说起下拉框大家一定不陌生,就是放着指定内容的容器需要什么就直接选择就可以了,很方便...但layui的form表单组件不仅要引用插件还需要加载相应的模块,少了这两步操作,select、checkbox、radio等将无法显示,并且无法
[Documentation] 截图 Capture Page Screenshot [Arguments] ${JSContent} [Documentation] 执⾏JS Execute JavaScript ${JSContent} [Arguments] ${location} [Documentation] 选择Frame Select Frame ${location} ...
可用组件: form input textarea select option checkbox radio button label 选项 blocks默认添加的块: ['form', 'input', 'textarea', 'select', 'button', 'label', 'checkbox', 'radio'] (全部) 下载 CDN ...
支持所有类型客户端控件的校验 支持jQuery所有的选择器语法...选择的个数支持radio/checkbox/select三种控件 支持2个控件值的比较。目前可以比较字符串和数值型、日期型。 支持服务器端校验。 支持输入格式的校验。