html中radio,checkbox值的获取、赋值、注册事件

1,radio分组 

只要name一样,就是一组的,即一组中只能选择一个,如下: 

代码如下:

<span>group1:</span> 
<input type="radio" id="radio1" checked="checked" name="group1" />radio1 
<input type="radio" id="radio2" name="group1" />radio2 
<input type="radio" id="radio3" name="group1" />radio3 <span>group2:</span> 
<input type="radio" id="radio4" checked="checked" name="group2" />radio4 
<input type="radio" id="radio5" name="group2" />radio5 
<input type="radio" id="radio6" name="group2" />radio6 

 

效果如下: 
 

2,获取选中的radio节点 

使用jquery可以很方便做到,先选择group,然后过滤出checked的,如下: 

代码如下:

var group1 = $("[name='group1']").filter(":checked"); 
console.log(group1.attr("id")); 

3,选中一个radio节点 


使用jquery设置checked属性: 

 
代码如下:

$("#radio2").attr("checked", "checked"); 

 

4,去选中一个radio节点 

移除checked属性: 

代码如下:

$("#radio1").removeAttr("checked"); 

 

这样做的结果可能造成一组radio中没有一个处于选中状态。 

5,注册选中去选中事件 

还是使用jquery的on函数来注册change事件,如下: 

代码如下:

$("[name='group1']").on("change", 
function (e) { 
console.log($(e.target).val()); 
} 
); 

 

这样只要group1中任何一个有选中的,就会触发函数。

附:jquery中常见的对text,radio,checkbox获取值,赋值的操作代码-----

//获取单选框radio中checked的值
//方式一
var sex=$("input[name='radio_sex']:checked").attr("value");//xxxx.value 是javascript取值方式,使用jquery取值可为:$("xxxx").val()  或者  $("xxxx").attr("value")
//方式二
var sex=$("[name='radio_sex']").filter(":checked").attr("value"); $("#text_id").focus(function(){//code...}); //事件 当对象text_id获取焦点时触发
$("#text_id").blur(function(){//code...}); //事件 当对象text_id失去焦点时触发
$("#text_id").select(); //使文本框的Vlaue值成选中状态
$("input[name='radio_name'][value='要选中Radio的Value值'").attr("checked",true); //根据Value值设置Radio为选中状态

 

 

jQuery获取CheckBox选择的Value值

//遍历被选中CheckBox元素的集合 得到Value值
var hobby='';
//方式一
$("[name='hobby']").filter(":checked").each(function(){$(this).attr("value")+',';//可以使用this.value+',';   或者   $(this).val()+',';
});
//方式二
$("input[name='hobby']:checked").each(function(){hobby+=this.value+','});$("#checkbox_id").attr("checked"); //获取一个CheckBox的状态(有没有被选中,返回true/false)
$("#checkbox_id").attr("checked",true); //设置一个CheckBox的状态为选中(checked=true)
$("#checkbox_id").attr("checked",false); //设置一个CheckBox的状态为不选中(checked=false)
$("input[name='checkbox_name']").attr("checked",$("#checkbox_id").attr("checked"));//根据3,4,5条,你可以分析分析这句代码的意思
$("#text_id").val().split(","); //将Text的Value值以','分隔 返回一个数组
 

转载于:https://www.cnblogs.com/franson-2016/p/5607279.html

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

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

相关文章

ObjectAnimator属性动画应用demo

感谢慕课网--eclipse_xu 布局文件&#xff1a;activity_main.xml 1 <FrameLayout xmlns:android"http://schemas.android.com/apk/res/android"2 xmlns:tools"http://schemas.android.com/tools"3 android:layout_width"match_parent"…

今晚在线解读|2021-2022 .NET 中国开发者生态调查报告

点击蓝字关注我们作为一名 .NETer&#xff0c;你就职于怎样规模的公司&#xff1f;所属什么行业领域&#xff1f;平时使用哪些快速开发框架&#xff1f;产品方向及收费模式又是怎样的&#xff1f; 作为一名开发者&#xff0c;你从业已有几年&#xff1f;平时加班多吗&#xff1…

实现网站验证码切换功能

实现网站验证码切换功能 一、样例 样例1、 样例2、 二、实现原理 三、实现代码 com.fry.servlet.VerifyCodeServlet 1 package com.fry.servlet;2 3 import javax.imageio.ImageIO;4 import javax.servlet.ServletException;5 import javax.servlet.annotation.WebServlet;6 im…

校园春色关不住,怎奈何唯有花枝俏,不见赏花人?

受新冠肺炎疫情的影响&#xff0c;直至今天&#xff08;2020年4月16日&#xff09;&#xff0c;各大学依然是人去楼空&#xff0c;我的大学也不例外。春天来了&#xff0c;本应是校园春色关不住&#xff0c;却怎奈何唯有花枝俏&#xff0c;不见赏花人&#xff1f;这也正应了那句…

CSDN是如何让我副业月入过万的?

始 我跟 CSDN 的缘分要从 2011 年说起&#xff0c;当时我正上高二&#xff0c;当时好像是在搞鼓 MFC。当时家里有了第一台电脑&#xff0c;我也再也不用去黑网吧去敲代码了&#xff0c;在家搜索资料的时候出现在我眼帘之中&#xff0c;并且对我有帮助的基本上都是 CSDN 上的内…

MSMQ消息广播

安装配置MSMQ消息广播&#xff0c;并验证是否可以发送广播消息&#xff0c;过程实录。1. 安装MSMQ with broadcasting support选择安装“消息队列”&#xff0c;并在子选项中选择“多播支持”一起安装。2. 注册表修改MulticastBindIPIf Message Queueing found multiple IP add…

【操作系统】操作系统不可怕,重装系统不求人,因为我们是GISer!

GISer不仅可以用意念操作软件,而且可以轻松自如重装系统!今天我们分享用U制作启动盘,并安装Win7系统。 一、系统安装必备 优盘(现在的U盘内存都比较大,大于4G即可)电脑店操作系统(Win7 64位专业版)二、安装过程 1、系统启动盘制作 下载电脑店优盘制作软件,安装,运行…

看聊天记录都学不会C语言?太菜了吧》(16)我一直以为校花很漂亮,直到我叫了她一声...

若是大一学子或者是真心想学习刚入门的小伙伴可以私聊我&#xff0c;若你是真心学习可以送你书籍&#xff0c;指导你学习&#xff0c;给予你目标方向的学习路线&#xff0c;无套路&#xff0c;博客为证。 本系列文章将会以通俗易懂的对话方式进行教学&#xff0c;对话中将涵盖…

小米空调来了,意外的是还一起来了一个马桶盖

8月10日下午&#xff0c;小米旗下生态链企业智米召开了新品发布会&#xff0c;发布会上正式推出了智米全直流变频空调和智米智能马桶盖。 智米全直流变频空调采用了纯白配色&#xff0c;外观设计较为简洁&#xff0c;空调底部有一个圆形的显示屏&#xff0c;可显示温度、电量统…

聊一聊 CLR 中的 typedef 是怎么玩的

一&#xff1a;背景 在 CLR 源码中&#xff0c;我们会看到很多关于 typedef 的定义&#xff0c;比如下面这样&#xff1a;// Callback function type used by DacStreamManager to coordinate // amount of available memory between multiple streamable data // structures (…

JAVA如何正确处理Unicode字符

最近在开发输入法程序时遇到一个小问题&#xff0c;就是删除一个emoji时&#xff0c;不能一次删干净&#xff0c;需要执行两次操作才可以。Intuitively&#xff0c;这肯定是java操作unicode字符的问题&#xff0c;于是找了JAVA官方文档参考一下&#xff0c;解决了这个问题&…

透过面试题,洞察Hbase 核心知识点

LSM 算法 HFile 索引 &#xff0c;二级索引 hbase的问题 1.hbase怎么预分区&#xff1f; 2.hbase怎么给web前台提供接口来访问&#xff1f; 3.htable API有没有线程安全问题&#xff0c;在程序中是单例还是多例&#xff1f; 4.我们的hbase大概在公司业务中&#xff08;主要…

《看聊天记录都学不会Python到游戏实战?太菜了吧》(4)小白不知道这个知识点将会错漏百出

本系列文章将会以通俗易懂的对话方式进行教学&#xff0c;对话中将涵盖了新手在学习中的一般问题。此系列将会持续更新&#xff0c;包括别的语言以及实战都将使用对话的方式进行教学&#xff0c;基础编程语言教学适用于零基础小白&#xff0c;之后实战课程也将会逐步更新。 若…

【Pix4d精品教程】打开Pix4DMapper时提示Pix4DMapper.exe已停止工作的完全解决办法

本文为作者在使用软件时,打开Pix4DMapper时提示Pix4DMapper.exe已停止工作的完全解决办法,亲测可用! 目录 一、问题错误提示 二、问题分析及解决方法 一、问题错误提示 打开Pix4DMapper时,提示Pix4DMapper.exe已停止工作,错误提示如下: 展开问题详细信息:

Framework Design Studio 发布了

介绍 Krzysztof Cwalina 和他的伙计们最近在开发一个工具&#xff0c;可以帮助框架设计者更容易地进行设计、复查和维护高度易用的API&#xff0c;你可一定要看看Framework Design Studio&#xff08;FDS&#xff09;。 可以在此处下载FDS和它的快速入门文档。 目前这个工具主要…

微服务 配置中心 Nacos .Net 5

本文来自投稿&#xff1a;蓝创精英团队基于Nacos来一篇关于微服务的配置中心方案Demo。Nacos是开源的&#xff0c;同时&#xff0c;阿里云也有收费的关于它的服务&#xff0c;公司刚好是依托阿里云的服务体系&#xff0c;所以&#xff0c;使用它作为配置中心的可能性还是很大的…

看聊天记录都学不会C语言?太菜了吧》(17)5分钟搞懂指针与多重指针

若是大一学子或者是真心想学习刚入门的小伙伴可以私聊我&#xff0c;若你是真心学习可以送你书籍&#xff0c;指导你学习&#xff0c;给予你目标方向的学习路线&#xff0c;无套路&#xff0c;博客为证。 本系列文章将会以通俗易懂的对话方式进行教学&#xff0c;对话中将涵盖…

如何保护你的linux操作系统

导读在现在这个世道中&#xff0c;Linux操作系统的安全是十分重要的。但是&#xff0c;你得知道怎么干。一个简单反恶意程序软件是远远不够的&#xff0c;你需要采取其它措施来协同工作。那么试试下面这些手段吧。 使用SELinuxSELinux是用来对Linux进行安全加固的&#xff0c;有…

无人职守安装的设计与部署

无人职守安装的设计与部署 (2009-2-19) 安装前需要生成一个应答文件&#xff0c;此时需要一个光盘中的工具。首先&#xff0c;将WINDOWN2003光盘载入CD&#xff0c;---单击退出。接下来打开光盘&#xff0c; 选择SUPPORT—并打开&#xff0c; --TOOLS –并打开 -----…

干掉RedisHelper,请这样用分布式缓存

前言我们在项目中使用Redis时通常是写一个单例模式的RedisHelper静态类&#xff0c;暴露一些常用的Get、Set等操作&#xff0c;在需要使用地方直接RedisHelper.StringGet(xx,xx)就可以了&#xff0c;这样虽然简单粗暴地满足我们对Redis的所有操作需要&#xff0c;但是这在Asp.N…