jqurey操作radio总结

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

     在我们前端的项目中,会经常用到radio单选按钮,下面给出个例子总结jquery对radio的各种操作:

示例如下:

<html>
<head><meta charset="UTF-8"><title>radio </title><script type="text/javascript" src="jquery-1.10.2.js"></script>  
</head>
<body><form><input type="radio" name="city" checked="checked" 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">苏州</form>
</body>
<html>


1、获取选中的radio的值:

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

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

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

$("input:radio[name='city'][value='YangZhou']").attr("checked",true);
或者
$("input[type=radio][name='city'][value='YangZhou']").attr("checked",true);

 注:很多时候我们更加value的值来选中对应的radio按钮,上面都是直接写死在代码里面,但是很多的时候,我们value是后台传过来的值,会存在一个变量里面,这个变量每次存的值不会一样。

例如:这个变量就叫做:  Cityvalue

cityvalue是js用ajax从服务器请求过来的,比如cityvalue="TianJin";

如果我们直接把cityvalue写到里面是有错误的:

例如;

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

这样是错误的,我们可以在console上打印出这串字符串,看一下他的值是如下:

092106_nQiG_1540325.png

因为cityvalue在""里面,所以这个就是他本来的名字值,而他所代表的字符串并没有进去,所以我们不要把他放在双引号里面,因为cityvalue本来也是一个字符串,所以采用连接的方式+,变为

$("input[type=radio][name='city'][value="+cityvalue+"]").attr("checked",true);

093158_8Iq4_1540325.png

这样是对的,但是我觉得要和上面一样得把:var cityvalue="'TianJin'",就是在里面加上单引号,这样拼成的字符串就和前面的一模一样了:

093645_fvrB_1540325.png

    给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。


转载于:https://my.oschina.net/u/1540325/blog/417224

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/288828.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

android中文离线api_比林肯法球Linken sphere浏览器更多更新指纹的国产防关联软件-VMLogin中文版浏览器...

林肯法球&#xff08;Linken Sphere&#xff09;是俄罗斯人开发的一个功能强大的浏览器&#xff0c;该工具最早出现在2017年7月&#xff0c;此外还具有“离线记录模式”功能&#xff0c;能够简化会话之间导入和导出cookie的过程。使用Linken Sphere工具开启浏览器会话时&#x…

【C语言简单说】十七:数组

** ( ิ∀ิ ) 还有两个小节就基本上简单的过了一遍C语言了&#xff0c;现在我们来讲诉什么是数组。** 字面意思&#xff1a;数组&#xff0c;数组的一个组&#xff1f;应该说一堆数值的一个集合&#xff1f;我不知道大家的年龄段在于什么阶段&#xff0c;如果学过集合的话&am…

剑指offer之用链表实现栈(带头节点)

1 问题 用链表实现栈,栈先进后出. 2 代码实现 #include <stdio.h> #include <stdlib.h>#define true 1 #define false 0typedef struct Node {int value;struct Node *next; } Stack;/**打印栈*/ void print(Stack *stack) {if (stack NULL){printf("stack…

java arraylist枚举器遍历_Java基础(七)泛型数组列表ArrayList与枚举类Enum

一、泛型数组列表ArrayList1.在Java中&#xff0c;ArrayList类可以解决运行时动态更改数组的问题。ArrayList使用起来有点像数组&#xff0c;但是在添加或删除元素时&#xff0c;具有自动调节数组容量的功能&#xff0c;而不需要为此编写任何代码。对数组列表实施插入和删除操作…

Blazor University (12)组件 — 组件生命周期

原文链接&#xff1a;https://blazor-university.com/components/component-lifecycles/组件生命周期源代码[1]Blazor 组件具有许多我们可以重写以影响应用程序行为的虚拟方法。这些方法在组件生命周期的不同时间执行。下图概述了这些生命周期方法的流程。组件生命周期图SetPar…

datatable.select()的一个问题

今天用tbCategory.select("ID"id)时发现报错&#xff1a;在 Range 对象中&#xff0c;Min (3)必须小于或等于 max (-1) 后来百度发现参数要用单引号括起来&#xff1a;tbCategory.select("ID"id"")&#xff0c;但是ID的类型是int型的&#xff0c…

C#趣味程序---个位数为6,且能被3整出的五位数

using System;namespace ConsoleApplication1 {class Program{static void Main(string[] args){int count 0;int k;for (int i 1000; i < 9999; i){k i * 10 6;if (k % 3 0){Console.WriteLine(k);count;}}Console.WriteLine(count); }} }

如何通过css控制内容显示顺序 第二行的内容优先显示

我们有时进行网页设计时为了想让用户感兴趣的内容优先显示在前&#xff0c;又不想改动代码的先后顺序&#xff0c;要怎么操作呢&#xff1f;&#xff08;或者换种说法&#xff1a;源代码中要先看到A再看到B&#xff0c;而视觉上是先B再A&#xff09;举个简单的例子&#xff0c;…

【C语言简单说】十七:数组(补)

上一节 我们所说的数组是整数类型的对吧&#xff1f;那么我们还有其他类型 的数组&#xff0c;在这里用字符数组举例。 如下代码&#xff1a; #include<stdio.h> #include<stdlib.h> int main() {char a[5]{a,b,c,d,e};int i;for(i0;i<5;i){printf("a[%d…

精简 opencv python_基于Python的OpenCV人脸检测!简直不要太简单!

一、文章概述注意&#xff1a;本文只是人脸检测&#xff0c;人脸识别的实现请参见本人另一篇博客&#xff1a;基于OpenCVTensorFlowKeras实现人脸识别本文将要讲述的是Python环境下如何用OpenCV检测人脸&#xff0c;本文的主要内容分为&#xff1a;1、检测图片中的人脸2、实时检…

WireShark之抓包过滤链接部分

1 问题 我们打开WireShark&#xff0c;开始抓包&#xff0c;然后浏览器输入http链接地址&#xff0c;那我们怎么快速在WireShark里面找到 2 解决办法 1&#xff09;在WireShark里面输入http 2 ) Ctrl F,然后选择字符串&#xff0c;然后在字符串的右边输入 我们要过滤的部分…

最通俗易懂的依赖注入之生命周期

这篇文章是 ASP.NET 6 依赖注入系列文章的第二篇&#xff0c;点击上方蓝字可以阅读整个系列。在上一篇文章中&#xff0c;我们讨论了什么是依赖注入和控制反转&#xff0c;以及它的作用是什么。在这篇文章中&#xff0c;我们先演示一下依赖注入的基本用法&#xff0c; 然后再讨…

Cnblogs自定义皮肤css样式-星空观测者

不知不觉来Cnblogs也这么久了&#xff0c;然而Blogs提供的主题还是依旧那么复古&#xff0c;总觉得阅读起来难免枯燥&#xff0c;虽然我认为做技术不可以太过浮躁&#xff0c;但是一个美观的主题终究是吸引人眼的第一要素。 毕竟这么久了&#xff0c;在博客园还没有发现一个比较…

我的世界java版forge怎么用_我的世界电脑版MOD怎么用 我的世界pc版forge怎么安装...

我的世界由游戏本体以及启动器两部分组成&#xff0c;要玩游戏就要下载好本体再用启动器启动&#xff0c;单有游戏或者单有启动器都是玩不成的&#xff0c;想知道我的世界电脑版怎么开始&#xff0c;我的世界pc版启动器怎么用就来看看吧&#xff01;▍MOD怎么用1.安装MOD前要先…

C#趣味程序---百鸡百钱

问题&#xff1a;公鸡一只5元&#xff0c;母鸡一只3元&#xff0c;小鸡三只1元&#xff0c;问100元可以买多少只鸡&#xff1f; using System;namespace ConsoleApplication1 {class Program{static void Main(string[] args){int z, i0;for (int x 0; x < 20; x)for (int …

python面向对象设计管理系统_python面向对象之单例设计模型

单例目标单例设计模式__new__ 方法Python 中的单例01. 单例设计模式设计模式设计模式 是 前人工作的总结和提炼&#xff0c;通常&#xff0c;被人们广泛流传的设计模式都是针对 某一特定问题 的成熟的解决方案使用 设计模式 是为了可重用代码、让代码更容易被他人理解、保证代码…

【C语言简单说】十八:二维数组

这里可能会让大家脑袋迷糊&#xff0c;不过没事&#xff0c;多动动脑。 这一节我们来说二维数组&#xff0c;啥叫二维数组&#xff1f;之前我们那个是一维数组&#xff0c;好了&#xff0c;我们接下来大家就会慢慢的搞懂的。 我们的一维数组就像 一列排得整整齐齐的队伍&…

移动web开发(一)——移动web开发必备知识

参考: 移动终端开发必备知识.http://isux.tencent.com/mobile-development-essential-knowledge.html

剑指offer之求两个链表的第一个公共节点

1 问题 输入两个链表&#xff0c;找出它们的第一个公共结点。 含有公共节点的两个链表的结构类似于下图中的链表&#xff1a; 1 -> 2 -> 3 -> 4 ->5 2 -> 4 ->5 可以看到两个链表中有一个公共节点&#xff0c;其中4节点就是这两个链表的公共节点 2 分析…

.Net Core 限流控制-AspNetCoreRateLimit

简介AspNetCoreRateLimit是ASP.NET核心速率限制框架&#xff0c;能够对WebApi&#xff0c;Mvc中控制限流&#xff0c;AspNetCoreRateLimit包包含IpRateLimit中间件和ClientRateLimit中间件&#xff0c;每个中间件都可以为不同的场景设置多个限&#xff0c;该框架的作者是stefan…