JQuery操作单选按钮以及复选按钮

原创 2012年03月29日 13:29:19

单选按钮以及复选按钮在开发过程中会经常用到,下面我就来通过JQuery操作单选按钮和复选按钮:

单选按钮:

通过JQuery获取单选按钮对象我们总共有三种途径:

①ID:$("#radioId")

②NAME:$(":input[name='radioName']")

③TYPE:$("input[type=radio]"),可能在有的资料上面写的是:$(""input[@type=radio]""),这个的话跟你的JQuery版本有关系,如果是老版本的话就用后者,新版本就用前者,如果不知道自己的版本到底适合用哪一个的话就挨个试,反正一次尝试就能搞定,而且还能学到知识,何乐而不为呢!

我们都知道,在一组单选按钮当中只能使一个生效,要实现这种效果,很多人可能会认为把ID改为相同的就可,其实,你去尝试一下就会知道,在一组单选按钮中仍然可以选用多个。因为,实现此效果的关键属性不是ID,而是NAME。

介绍完了之后,我们投入到只用当中吧:

我们获取完单选按钮的对象之后,就得对此对象进行遍历,因为,此对象的类型是一个数组,我们要挨个对其进行判断是否被选中,然后再从选中的按钮中取出所需要的值,示例代码如下:

var itemradio = $("input[type=radio]");
    	result="";
    	nums = itemradio.length;
    	for(i=0;i<nums;i++)    {
    	       if(itemradio[i].checked){  
    	    	   result = itemradio[i].value+","+itemradio[i].id+";"+result;
    	       }
    	}
result就是我想获取的值,前面那个value可能大家会看得懂,而后面那个ID有的人可能会犯迷糊。在此,我就进行一下扩展:在JS中所有的对象都可以直接通过“.”来获取属性的值。

复选框:

关于复选框,我们需要的只是“全选和反选”的效果,使用JQuery的话只要一句话就可以搞定,如下:

var checkedObj = $('input:checkbox[name="checkbox"]:checked');
        var values = "";
        checkedObj.each(function() { 
        	var value=this.value + ","; 
        	values += value;
        });
好啦,通过上面的两段代码你就可以操作复选框和单选按钮啦!!!


使用jQuery获取单选按钮radio的选中值

简单来说:var val = $('input[name="sex"]:checked').val();整体代码: 获取单选按钮选中的值 ...
  • candy_tity
  • candy_tity
  • 2016年12月01日 16:39
  • 4100

jquery实现单选按钮选中与取消选中

单选按钮的选中与取消选中,是元素自带的属性checked来实现的 一般情况下: $("#updateApplyForSmsNotification [name='applyForSmsNotifica...
  • suzhouhe1991
  • suzhouhe1991
  • 2016年10月21日 16:35
  • 5598

jQuery如何获取选中单选按钮radio的值

实例1: 支付宝 财务通      获取一组单选按钮对象:var obj_payPlatform = $('#wrap input[name="payMethod"]');   ...
  • liuwenbiao1203
  • liuwenbiao1203
  • 2016年12月27日 10:04
  • 14511

jquery实现html中单选按钮的切换选中

damo 男 女 ('.radio').click(function(){    if(('.radio').click(function(){ if( (this...
  • minzhang001
  • minzhang001
  • 2016年02月17日 09:52
  • 4293

利用原生js和jQuery实现单选框的勾选和取消操作

根据一下的Demo,大概就可以看的明白 Demo: window.onload = function(){ var dom_a = document.getElemen...
  • u014000377
  • u014000377
  • 2016年08月30日 18:14
  • 5922

图片单选按钮_jquery

  • 2013年03月14日 16:30
  • 836B
  • 下载

CSS3美化单选按钮和复选按钮

1.html CSS3美化单选按钮和复选按钮代码 .demo{width:360px;margin:50px auto 10px auto;padding:10px;} .demo ...
  • gao_xu_520
  • gao_xu_520
  • 2017年07月13日 09:39
  • 296

(亲测) 带有单选按钮和复选按钮 的dialog+详细代码+注释

package example.com.myapplication; import android.app.Activity; import android.app.AlertDialog; imp...
  • ITzhongzi
  • ITzhongzi
  • 2016年08月22日 10:03
  • 212

【jQuery】:radio单选按钮选择器

表单中的单选按钮常用于多项数据中仅选择其一,而使用:radio选择器可轻松获取表单中的全部单选按钮元素。 例如,在表单中添加多种类型的表单元素,使用:radio选择器获取并隐藏这些元素中的全部单...
  • happyhaojie
  • happyhaojie
  • 2015年12月17日 01:17
  • 142

jQuery给单选框默认选中方式

if (msg[0]["ACTIVE_STATE"] == 'Y') { $("input[name='state']").get(0).checked = true; } else { $("...
  • menghuannvxia
  • menghuannvxia
  • 2017年02月22日 15:38
  • 3343
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JQuery操作单选按钮以及复选按钮
举报原因:
原因补充:

(最多只允许输入30个字)