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操作复选按钮的小例子

有时遇到一个问题,需要获取页面选中checkbox的值传递给后台进行一系列处理。而我们写的最传统的JS获取选中的值如下: function getids(){ var obj = d...

C++builder 单选和复选按钮

  • 2011年05月19日 16:34
  • 344KB
  • 下载

android 单选,复选按钮,以及toast

RadioTest.java package mars.activity07; import android.app.Activity; import android.os.Bundle; imp...

一个VC的单选、复选按钮的使用

  • 2009年08月03日 11:33
  • 45KB
  • 下载

vb.net里的单选和复选按钮练习

  • 2009年04月15日 14:36
  • 74KB
  • 下载

对话框封装类(普通对话框,列表对话框,单选按钮对话框,复选对话框)

//对话框工具类DialogTool代码如下:对话框封装类(普通对话框,列表对话框,单选按钮对话框,复选对话框) public class DialogTool {     /**      *...

单选-复选按钮自定义样式

单选-复选按钮自定义样式

html之复选杜框(checkbox)、单选按钮(radio)、下拉菜单(select-option)

1、复选框(checkbox) 代码:

jquery操作单选、复选、下拉列表

  • 2011年03月05日 11:34
  • 49KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JQuery操作单选按钮以及复选按钮
举报原因:
原因补充:

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