jQuery操作input type=radio的实现代码

<input type="radio">如下：


代码如下:

<input type="radio" name="city" value="BeiJing">北京
<input type="radio" name="city" value="TianJin">天津
<input type="radio" name="city" value="NanJing">南京
<input type="radio" name="city" value="YangZhou">扬州
<input type="radio" name="city" value="SuZhou">苏州

1、获取选中的radio的值：

代码如下:

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

　　使用元素选择器，再使用属性过滤器name='city'，最后使用:checked选取被选中的元素。

2、给指定值的radio设置选中状态：

代码如下:

$("input[name='city'][value='YangZhou']").attr("checked",true);

　　给name="city"而且value="YangZhou"的radio设置选中状态。

3、取消name="city"的radio的选中状态：

代码如下:

$('input[name="city"]:checked').attr("checked",false);

　　4、获取name="city"的radio的个数：

代码如下:

$("input[name='city']").length;

　　5、获取name="city"而且索引是偶数的radio:

代码如下:

$("input[name='city']:even");

　　索引是从0开始的。

　　6、获取name="city"而且索引是奇数的radio:

代码如下:

$("input[name='city']:odd");

　　索引是从0开始的。

　　7、迭代radio:

代码如下:

$("input[name='city']").each(function(i,obj){
//i,迭代的下标，从0开始
//obj,当前的对象(HTMLInputElement),可以使用obj.value格式获取属性值
//$(this);当前jQuery对象,可以使用$(this).val()获取属性值
});

　　迭代name="city"的radio。

　　8、禁用radio:

代码如下:

$("input[name='city']").attr("disabled",true);

　　禁用name="city"的radio。

　　9、启用radio:

代码如下:

$("input[name='city']").attr("disabled",false);

　　启用name="city"的radio。

赞 (0)

相关推荐

  • jQuery操作 input type=checkbox的实现代码

    复制代码 代码如下: <input type="checkbox">: 2012欧洲杯"死亡之组"小组出线的国家队是:<br> <input type="checkbox" name="nation" value="Germany">德国 <input type="checkbox" name="nation" value=&

  • jQuery动态添加<input type=

    jQuery动态添加<input type="file">

    有时候需要在页面上允许用户上传多个文件,个数由用户自己决定,个数多了也可以删除,使用jQuery可以很简单的实现这个功能. 先给大家展示下效果图: <!DOCTYPE html> <html> <head> <title>test.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> &l

  • jquery对所有input type=text的控件赋值实现方法

    如下所示: function resetData() { $("input[type=text]").each( function() { $(this).attr("value",""); } ); } 以上这篇jquery对所有input type=text的控件赋值实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • jQuery动态添加 input type=file的实现代码

    复制代码 代码如下: <form id="fileForm" action="" method="post" enctype="multipart/form-data"> <tr> <td> <input type="file" name="file"><input type="button" id="a

  • jQuery通过改变input的type属性实现密码显示隐藏切换功能

    一般我们做登录注册的时候都会提供一个让用户选择自己输入的密码是否显示的需求, 这种需求我们肯定会想到只要动态改变input的type属性不就好了(text显示/password隐藏): 于是我用了$(''#id).attr('type', 'password')这个API 然而结果并不是我想的那样,出错了 HTML 代码 Uncaught Error: type property can't be changed 意思大概就是这个属性不能被修改. 于是我就googl一手. 然而我得到的结果是这样

  • jquery获取input type=text中的值的各种方式(总结)

     实例如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>JQuery获取文本框的值</title> <meta h

  • jQuery操作input type=radio的实现代码

    <input type="radio">如下: 复制代码 代码如下: <input type="radio" name="city" value="BeiJing">北京 <input type="radio" name="city" value="TianJin">天津 <input type="radio&quo

  • jQuery 操作input中radio的技巧

    通过jQuery获取页面中的所有radio对象,遍历页面中的radio,取消选中的标签,因为使用到jQuery时间,因此引用到了网上公共的js,这只是本人的一些总结,大神勿喷. <html> <head> <title>取消</title> <script language="javascript"> function _onclick() { $("input[name='ra']:checked").v

  • 原生javascript自定义input[type=radio]效果示例

    原生javascript自定义input[type=radio]效果示例

    本文实例讲述了原生javascript自定义input[type=radio]效果.分享给大家供大家参考,具体如下: 找到最为简单的仅仅使用css3的方案 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"

  • jQuery操作input值的各种方法总结

    获取选中的值获取一组radio被选中项的值 复制代码 代码如下: var item = $('input[@name=items][@checked]').val(); 获取select被选中项的文本 复制代码 代码如下: var item = $("select[@name=items] option[@selected]").text(); select下拉框的第二个元素为当前选中值 复制代码 代码如下: $('#select_id')[0].selectedIndex = 1;

  • jQuery实现input[type=file]多图预览上传删除等功能

    下面我们了解一下,多图上传时,怎么实现预览.上传.删除等功能.下图是功能实现的预览效果,虽然样式有点丑,不过功能还是实现了.话不多说,直接看代码会更直观一些. 首先定义一下基本格式,样式代码自行脑补: <body> <div class="upload-header"> <input id="upload" type="file" accept="image/*" multiple="m

  • jquery实现input输入框实时输入触发事件代码

    jquery实现input输入框实时输入触发事件代码

    复制代码 代码如下: <input id="productName" name="productName" class="wid10" type="text" value="" /> 复制代码 代码如下: //绑定商品名称联想 $('#productName').bind('input propertychange', function() {searchProductClassbyName()

  • Jquery操作js数组及对象示例代码

    贴一段jQuery对js对象及数组的操作:增删改查的代码. 复制代码 代码如下: var WorkList = new Array();//数组对象 //下面是自己定义的实体 function WorkEx(depart, title, begintime, endtime) {     this.SId = 0;     this.Id = -(WorkList.length+1);     this.DepartmentName = depart;     this.Title = titl

随机推荐