JavaScript jQuery获取radio/下拉框的选中值
JavaScript获取radio选中值
<ww:iterator value="proceList" status="rowstatus" id="it"><tr style="cursor: pointer;"><td class="Page_TableLabel_Center" ><input type="radio" id="cuibanradio" name="cuibanradio" value='<ww:property value="workItemId"></ww:property>'/></td></tr>
</ww:iterator>
要获取被选中的radio的值:
1、
var workItemId = document.getElementById("cuibanradio").value;
这种方法获得的workItemId 永远都是列表第一行的workItemId 值(不管选中的radio是第几行);
2、正确获取被选中的radio的方法:
var workItemId;var radio = document.getElementsByName("cuibanradio");for(var i = 0; i < radio.length;i++){if(radio[i].checked){workItemId = radio[i].value;break;}}
这里,我们就要总结一下getElementById和getElementsByName的区别了。我们先看下面这个例子:
javascript在取得radio被选中的值时一般使用遍历的方法,判断每个Radio是否被选中,如果是,再取其值.
<formid="userlist"method="post"action="option"><input type="radio" name="userid" value="1">1<input type="radio" name="userid" value="2">2<input type="radio" name="userid" value="3">3
</form>
<script language="javascript">function usubmit(action){var radionum = document.getElementById("userlist").userid;for(var i=0;i<radionum.length;i++){if(radionum[i].checked){userid = radionum[i].value}}window.location.href='option.action?action='+action+'&userid='+userid;}
</script>
这里有两个要注意的地方:一个是如何取值,一个是如何遍历。
document.getElementById(“userlist”).userid;
这是根据form的id再取其中控件元素的name取值的方法。也可以用document.getElementsByName(“userid”)直接获得
getElementById与getElementsByName的区别,getElementById取radio类型元素只能选取单个控件,getElementsByName取radio类型元素的时候是取出的整个radio数组,如果一定要用getElementById,则可像上面代码一样先用getElementById取得整个表单的id.后面紧跟radio名称即可 。
现在知道document.getElementsByName(“userid”)就是得到一个数组,该数组中的元素是该dom树中所有name为radionum的元素,即使只有一个radio,也是一个只包含一个元素的数组。而document.all.userid则不同,它是得到页面中的userid元素的引用,当页面中存在多个radio时,它返回的是一个数组,如果页面中只包含一个radio,则得到的就是这个radio对象的引用.由于这时得到的不是一个数组,因此就不能遍历数组来进行判断了.如下面这个方法:
<script>function getRadioBoxValue(radioName){var obj = document.getElementsByName(radioName); //这个是以标签的name来取控件for(i=0; i<obj.length;i++) {if(obj[i].checked) {return obj[i].value;}} return "undefined";
}
</script>
jQuery获取radio选中值:
<input type="radio" name="radio" id= "radio1" value ="radio1" checked="checked" />
<input type="radio" name="radio" id= "radio2" value="radio2" />
<input type="radio" name="radio" id= "radio3" value="radio3" />
获取方法:
1.获取选中值,三种方法都可以:
$('input:radio:checked').val();
$("input[type='radio']:checked").val();
$("input[name='radio']:checked").val();
2.设置第一个Radio为选中值:$('input:radio:first').attr('checked', 'checked');
或者
$('input:radio:first').attr('checked', 'true');
注:attr("checked",'checked')= attr("checked", 'true')= attr("checked", true)
3.设置最后一个Radio为选中值:
$('input:radio:last').attr('checked', 'checked');
或者
$('input:radio:last').attr('checked', 'true');
4.根据索引值设置任意一个radio为选中值:
$('input:radio').eq(索引值).attr('checked', 'true');索引值=0,1,2....
或者
$('input:radio').slice(1,2).attr('checked', 'true');
5.根据Value值设置Radio为选中值
$("input:radio[value=http://www.2cto.com/kf/201110/'radio2']").attr('checked','true');
或者
$("input[value=http://www.2cto.com/kf/201110/'radio2 ']").attr('checked','true');
6.删除Value值为rd2的Radio
$("input:radio[value=http://www.2cto.com/kf/201110/'radio2 ']").remove();
7.删除第几个Radio
$("input:radio").eq(索引值).remove();索引值=0,1,2....
如删除第3个Radio:$("input:radio").eq(2).remove();
8.遍历Radio
$('input:radio').each(function(index,domEle){//写入代码
});
jQuery如何获取下拉框的选中值:
<select id= "multiSelect"><option value="1" selected= "selected">one</option ><option value="2" >two</ option><option value="3" >three</ option><option value="4" >four</ option><option value="5" >five</ option>
</select>
1. 获取选中项:
获取选中项的Value值:$('select#multiSelect option:selected').val();或者$('select#multiSelect ').find('option:selected').val();
获取选中项的Text值:$('select#multiSelect option:selected').text();或者$('select#multiSelect ').find('option:selected').text();
2. 获取当前选中项的索引值:
$('select#multiSelect ').get(0).selectedIndex;
3. 获取当前option的最大索引值:
$('select#multiSelect option:last').attr("index")
4. 获取集合的长度:
$('select#multiSelect ')[0].options.length;
或者
$('select#multiSelect ').get(0).options.length;
5. 设置第一个option为选中值:
$('select#multiSelect option:first').attr('selected','true')
或者$('select#multiSelect ')[0].selectedIndex = 0;
6. 设置最后一个option为选中值:
$('select#multiSelect option:last').attr('selected','true')
JavaScript jQuery获取radio/下拉框的选中值相关推荐
- js获得html下拉框的值,JavaScript如何获取select下拉框中第一个值
本文主要和大家介绍JavaScript实现获取select下拉框中第一个值的方法,涉及javascript针对页面元素属性的相关获取操作技巧,需要的朋友可以参考下,希望能帮助到大家. 1.说明 获取s ...
- jquery中如何获取select 下拉框默认选中的值?
通过id获取下拉框默认选中的值 <select class="form-control" id="numbers"><option value ...
- js判断一个下拉框的选中值是否改变
下拉框按钮 select 的change $("input[type=radio][name=school][value=8]").attr("checked" ...
- combox选中方法 extjs_extjs 怎么获取combox下拉框中选中的值
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 var securityT ...
- MUI框架获取下拉框SELECT选中值
HTML代码: <select οnchange="index.initClickOrg()" class="mui-h5" id="org&q ...
- 根据后台返回的值来select下拉框默认选中值
转载于:https://blog.51cto.com/11871779/2363444
- select获取下拉框的值 下拉框默认选中
本文主要介绍select下拉框的相关方法. 1.通过id获取下拉框的value和文本值 例如: <select class="form-control" id=" ...
- html下拉框怎么默认选中,select获取下拉框的值 下拉框默认选中方法
本文主要介绍select下拉框的相关方法. 1.通过id获取下拉框的value和文本值 例如: 数字1 数字2 $("#numbers option:selected").val( ...
- php下拉默认选中的值,select下拉框默认选中
这次给大家带来select下拉框默认选中,select下拉框默认选中的注意事项有哪些,下面就是实战案例,一起来看一下. 本文主要介绍select下拉框的相关方法. 1.通过id获取下拉框的value和 ...
最新文章
- [LeetCode] NO. 100 Same Tree
- 三点到六点是几个小时_你被“8小时睡眠论”给骗了吗?!
- 深度测试与alpha混合(3)
- MUI框架:移动端底部固定mui-bar-tab布局 - 案例篇
- [原创]ASP.net 2.0 ObjectDataSource 应用操作代码实例(1)-—访问SQL2005
- php ajax跨域cookies,解决ajax跨域请求数据cookie丢失问题
- SVN客户端使用详细
- Windows消息大全(转载)
- ddr4单颗粒最大_国产内存来了:长鑫发布DDR4/LPDDR4X内存
- 面对复杂问题时,系统思考助你理解问题本质
- CentOS挂载3T硬盘的方法
- Java String 真的是不可变的吗
- android canvas 工作流_Activiti工作流引擎使用
- C语言程序设计 翁恺 中M2020春C入门练习第I段——变量、表达式、分支、循环 (2021/09/25 更新:AC代码 翻新至78题)
- 删除计算机用户时拒绝访问权限,win10打开管理员账户拒绝访问怎么办
- 独热码状态机、SR锁存器延迟模型、移位除法器模型
- 深入原理64式:46 高中数学公式总结
- Linux下jar启停脚本
- 7-10 计算工资 (15 分)
- 光脚丫学LINQ系列演示
热门文章
- C# 复制 粘贴 剪切 撤销
- proxool配置多数据库多连接池
- (转)常用正则表达式
- 打开工程会提示下载的可能原因和可能解决方法
- MONGODB 2.6.8 的一个BUG [Assertion: 13548:BufBuilder attempted to grow() to 134217728 bytes, past the ]
- android.content.ActivityNotFoundException: No Activity found to handle Intent 的错误
- android data分区(标准)
- Android滑屏 mScrollX mScrollY scrollTo() scrollBy()
- [BZOJ4027][HEOI2015]兔子与樱花(贪心)
- Java IO流及应用(一)