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

单选按钮以及复选按钮在开发过程中会经常用到，下面我就来通过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;
});

好啦，通过上面的两段代码你就可以操作复选框和单选按钮啦！

赞 (0)

相关推荐

  • JQuery radio（单选按钮）操作方法汇总

    JQuery radio（单选按钮）操作方法汇总

    随着Jquery的作用越来越大,使用的朋友也越来越多.在Web中,由于CheckBox.Radiobutton .DropDownList等控件使用的频率比较高,就关系到这些控件在Jquery中的操作问题.由于Jquery的版本更新很快,代码的写法也改变了许多,以下Jquery代码适query1.4版本以上. 1.获取选中值,三种方法都可以: 复制代码 代码如下: $('input:radio:checked').val(): $("input[type='radio']:checked&quo

  • jquery实现选中单选按钮下拉伸缩效果

    jquery实现选中单选按钮下拉伸缩效果

    本文实例讲述了jquery实现选中单选按钮下拉伸缩效果的方法.分享给大家供大家参考.具体如下: 这是一个使用jQuery插件实现的伸缩效果,在网页上,单击单选按钮,也就是Radio元素后,所属的对应内容向下拉出,伸展开来,平时是不显示的,可用在发票打印快递单查询等场合. 运行效果如下图所示: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/

  • jquery判断单选按钮radio是否选中的方法

    本文实例讲述了jquery判断单选按钮radio是否选中的方法.分享给大家供大家参考.具体如下: html代码如下: <input type="radio" id="d1" name="ra" value="a" checked="checked" /> <input type="radio" id="d2" name="ra"

  • 基于Jquery easyui 选中特定的tab

    获取选中的 Tab // 获取选中的 tab panel 和它的 tab 对象 var pp = $('#tt').tabs('getSelected'); var tab = pp.panel('options').tab; // 相应的 tab 对象 更新特定的选项卡面板 可使用update方法,param参数包含2个属性: tab: 将被更新的选项卡. options: 选项卡相关配置项. Example: //当前tab var current_tab = $('#frame_tabs'

  • jQuery模仿单选按钮选中效果

    jQuery模仿单选按钮选中效果

    刚开始学jquery,工作中有些css表单中的按钮美化很麻烦,所以想着用jquery来替换,复选框的jquery很容易,就是简单的样式切换效果,用toggleClass()方法即可. 而单选框之前一直不知道怎么做,因为在单选框中选中一个,其他的都必须移除掉样式,如果2个单选框在同级中则用siblings()则可直接找到其他单选框移除掉样式即可.鉴于自己工作是循环列表模式,每个<li>里面都带有一个单选框,未发现jquery中parent()这个好用的方法,以致于纠结了半天. css如下: &l

  • 基于jquery自定义的漂亮单选按钮RadioButton

    基于jquery自定义的漂亮单选按钮RadioButton

    继续分享web前端自定义控件,今天所要分享的控件是单选按钮,希望对你有收获,有好的建议也希望能留言给我.代码如下: Html代码如下: 复制代码 代码如下: <div style="margin:50px;float:left;"> <b class="radio" _txt="单选我"></b> <b class="radio" _txt="单选你"><

  • jquery实现带单选按钮的表格行选中时高亮显示

    上篇博客写的是复选框的,这次写的是单选框的,有时查询的时候,只能选择一条记录,如果将选中的这条记录的行高亮显示,同时该行的单选按钮也被选中了,这样会提高用户的体验的.如今的时代,就是用户体验的时代. 效果如下: CSS文件如下如下所示: 复制代码 代码如下: .selected{ background:#FF6500; color:#fff; }: 这次的js文件的代码就变得更简单了,如下所示: 复制代码 代码如下: /** * 设置含有单选按钮的表格的背景颜色 */ $(document).r

  • jQuery设置单选按钮radio选中/不可用的实例代码

    jQuery设置单选按钮radio选中/不可用的实例代码

    因为本 part 是"jQuery日常使用篇",所以都是由具体需求出发,总结需要用到的知识点.代码写得未必很好,达到目标就好.那么我们先来看看这次的需求:色块模式基于彩色模式,即开了彩色才能开色块,彩色处于关闭的时候色块不可用,开启彩色时色块radio可用,关闭彩色时如果色块处于开的话需要把它关掉,大概就这样. 我们先来看看演示效果: 我们接下来看看jQuery对单选按钮 radio 的操作. 1. 彩色处于关闭的时候色块不可用 需要两步,当页面打开时,检测如果彩色关闭的话,让色块的&

  • JQuery操作单选按钮以及复选按钮示例

    单选按钮以及复选按钮在开发过程中会经常用到,下面我就来通过JQuery操作单选按钮和复选按钮: 单选按钮: 通过JQuery获取单选按钮对象我们总共有三种途径: ①ID:$("#radioId") ②NAME:$(":input[name='radioName']") ③TYPE:$("input[type=radio]"),可能在有的资料上面写的是:$(""input[@type=radio]""),这个

  • Android编程实现带有单选按钮和复选按钮的dialog功能示例

    本文实例讲述了Android编程实现带有单选按钮和复选按钮的dialog.分享给大家供大家参考,具体如下: 带有单选按钮的dialog: package example.com.myapplication; import android.app.Activity; import android.app.AlertDialog; import android.app.Dialog; import android.content.DialogInterface; import android.os.

  • Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题

    Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题

    Vue.js可以很方便的实现数据双向绑定,所以在处理表单,人机交互方面具有很大的优势.下面给大家介绍Vue.js表单标签中的单选按钮.复选按钮和下拉列表的取值问题. 摘要: 表单标签取值问题中,单选按钮.复选按钮和下拉列表都比较特殊.这里总结一下vue.js中关于单选按钮.复选按钮和下拉列表不同情况的取值特殊性问题. 表单标签取值问题中,单选按钮.复选按钮和下拉列表都比较特殊.这里总结一下vue.js中关于单选按钮.复选按钮和下拉列表不同情况的取值特殊性问题. 一.单选按钮 单选按钮:单选按钮用

  • JQuery实现简单的复选框树形结构图示例【附源码下载】

    JQuery实现简单的复选框树形结构图示例【附源码下载】

    本文实例讲述了JQuery实现简单的复选框树形结构图.分享给大家供大家参考,具体如下: 这是自己写的简单树形结构图,实现的功能有: 1.最左边的按钮实现子目录的隐藏和显示 2.点击父节点的复选框选中后,父节点下的所有的子节点也选中:父节点未选中,则下面的所有的子节点也取消选中(全选和全不选) 3.选中一个子节点时相应的父节点也选中:当所有的子节点都没有选中时,父节点也取消选中 这是实现的最简单的功能.下面来具体的谈谈具体的实现: 1.引入库 所有的这些操作都是通过JQuery来实现的,所以首先要

  • PyQt5基本控件使用详解:单选按钮、复选框、下拉框

    本文主要介绍PyQt5界面最基本使用的单选按钮.复选框.下拉框三种控件的使用方法进行介绍. 1.RadioButton单选按钮/CheckBox复选框.需要知道如何判断单选按钮是否被选中. 2.ComboBox下拉框.需要知道如何对下拉框中的取值进行设置以及代码实现中如何获取用户选中的值. 带着这些问题下面开始介绍这 RadioButton单选按钮.CheckBox复选框. ComboBox下拉框 三种基本控件的使用方法 QRadioButton单选按钮 单选按钮为用户提供 多选一 的选择,是一

  • Swing常用组件之单选按钮和复选框

    Swing常用组件之单选按钮和复选框

    本文为大家分享了Swing单选按钮和复选框的使用方法,供大家参考,具体内容如下 JRadioButton构造函数: JRadioButton():建立一个新的JRadioButton. JRadioButton(Icon icon):建立一个有图像但没有文字的JRadioButton. JRadioButton(Icon icon,boolean selected):建立一个有图像但没有文字的JRadioButton,且设置其初始状态(有无被选取). JRadioButton(String te

  • C#实现自定义单选和复选按钮样式

    目录 实践过程 效果 代码 实践过程 效果 代码 public partial class GlorifyCheckBox : CheckBox { public GlorifyCheckBox() { InitializeComponent(); FontAspect = getAspect(); //获取当前控件文本的读取方向 } #region 变量 private bool FontAspect = false; //判断字体的方向 private int Measurement = 2

  • js使用DOM设置单选按钮、复选框及下拉菜单的方法

    本文实例讲述了js使用DOM设置单选按钮.复选框及下拉菜单的方法.分享给大家供大家参考.具体实现方法如下: 1.设置单选按钮 单选按钮在表单中即<input type="radio" />它是一组供用户选择的对象,但每次只能选一个.每一个都有checked属性,当一项选择为ture时,其它的都变为false. 先贴上一个例子: 复制代码 代码如下: <script type="text/javascript">     function ge

  • mui开发中获取单选按钮、复选框的值(实例讲解)

    js获取单选按钮的值 function getVals(){ var res = getRadioRes('rds'); if(res == null){mui.toast('请选择'); return;} mui.toast(res); } function getRadioRes(className){ var rdsObj = document.getElementsByClassName(className); var checkVal = null; for(i = 0; i < rd

  • jquery处理checkbox（复选框）是否被选中实例代码

    jquery处理checkbox(复选框)是否被选中 现在如果一个复选框被选中,是用checked=true,checked="checked"也行 要用prop代替attr会更好,虽然在jQuery1.6之前版本的attr()方法能正常使用,但是现在必须使用prop()方法代替 实例代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&q

随机推荐