打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
jquery js radio单选框取值和赋值
userphoto

2022.11.26 湖南

关注

今天下午遇到的坑,天大的坑啊,表单clear后,radio赋值无效。去除clear后却可。我用的以下方法尝试,都失败。最终问了项目经理,用末尾方法实现了。

以下方法

  1. //取radio的值

  2. $("input[name='radioName'][checked]").val();

  3. //给radio 赋值, 选中值为2的radio:

  4. $("input[name='radioName'][value=2]").attr("checked",true);

官方的方法是这样写:

  1. //获取选中值,三种方法都可以:

  2. $('input:radio:checked').val();

  3. $("input[type='radio']:checked").val();

  4. $("input[name='rd']:checked").val();

  5. //设置第一个Radio为选中值:

  6. $('input:radio:first').attr('checked', 'checked');

  7. //或者

  8. $('input:radio:first').attr('checked', 'true');

  9. //注:attr("checked",'checked')= attr("checked", 'true')= attr("checked", true)

  10. //设置最后一个Radio为选中值:

  11. $('input:radio:last').attr('checked', 'checked');

  12. //或者

  13. $('input:radio:last').attr('checked', 'true');

  14. //根据索引值设置任意一个radio为选中值:

  15. $('input:radio').eq(索引值).attr('checked', 'true');索引值=0,1,2....

  16. //或者

  17. $('input:radio').slice(1,2).attr('checked', 'true');

  18. //根据Value值设置Radio为选中值

  19. $("input:radio[value=http://www.2cto.com/kf/201110/'rd2']").attr('checked','true');

  20. //或者

  21. $("input[value=http://www.2cto.com/kf/201110/'rd2']").attr('checked','true');

  22. //删除Value值为rd2的Radio

  23. $("input:radio[value=http://www.2cto.com/kf/201110/'rd2']").remove();

  24. //删除第几个Radio

  25. $("input:radio").eq(索引值).remove();索引值=0,1,2....

  26. 如删除第3个Radio:$("input:radio").eq(2).remove();

  27. //遍历Radio

  28. $('input:radio').each(function(index,domEle){

  29. //写入代码

  30. });

此方法有效:

  1. $("input[name='GENDER'][value=" + object.GENDER + "]").prop("checked", "checked");//object..是请求得到的数据

  2. $("input[name='MARRIAGE'][value=" + object.MARRIAGE + "]").prop("checked", "checked");

  3. $("input[name='JOBTYPE'][value=" + object.JOBTYPE + "]").prop("checked", "checked");

总结:

  • 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。

  • 对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法

举一个例子:

<input id="chk1" type="checkbox" />是否可见
<input id="chk2" type="checkbox" checked="checked" />是否可见

像checkbox,radio和select这样的元素,选中属性对应“checked”和“selected”,这些也属于固有属性,因此需要使用prop方法去操作才能获得正确的结果。

$("#chk1").prop("checked") == false
$("#chk2").prop("checked") == true

如果上面使用attr方法,则会出现:

$("#chk1").attr("checked") == undefined
$("#chk2").attr("checked") == "checked"

二、

在编辑已有表单信息时,需要先对表单的值进行初始化,其他都比较容易直接通过.val(),单选略复杂,网上找的方法不太管用,可以试试如下方法,jQuery代码:

$("input[name='sexy']").each(function(index, element) {

            if($(this).val()==json_person.sexy){ 
$(this).prop("checked",true); 

        });

简单思路就是遍历每一项判断其value等于要设定的值则赋予checked属性。porp()和attr()详见另一篇文章:http://blog.csdn.net/taijiedi13/article/details/37905471

本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
jQuery操作复选框checkbox技巧总结 ---- 设置选中、取消选中、获取被选中的值、判断是否选中等
Jquery主要控件的取值、赋值,包括textbox,button,lable,radio,checkbox,selected
Jquery操作复选框(CheckBox)的取值赋值实现代码
jquery操作复选框(checkbox)的12个小技巧总结
JQUERY获取text,areatext,radio,checkbox,select值
jquery radio,checkbox,select操作 - Shenzhen Tou...
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服