jQuery操作radio和checkbox（赋值取值和绑定事件）

最新推荐文章于 2021-02-20 14:47:35 发布
最新推荐文章于 2021-02-20 14:47:35 发布
阅读量1.1k 收藏
点赞数
分类专栏： jQuery 文章标签： json javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zyy_jay/article/details/84535748
版权
为了兼容ie FF chrome等主流浏览器，对事件部分作了修改：

[b]radio的赋值和事件操作[/b] 

// 绑定radio单击方法
	$("input[type='radio']").bind("click", function(e) {
			var theEvent = window.event || e;
			var theObj = theEvent.target || theEvent.srcElement;
	        var selectedvalue = $(this).val(); 
	        if (selectedvalue == "0") {  
	            $('input[name="' + theObj.name + '"][value="1"]').removeAttr("checked");
	            $('input[name="' + theObj.name + '"][value="0"]').attr("checked",true);
	        } 
	        else
	        {
	            $('input[name="' + theObj.name + '"][value="0"]').removeAttr("checked");
	        	$('input[name="' + theObj.name + '"][value="1"]').attr("checked",true);
	        }
	});


$.ajax(
		{
			type : 'POST',
			url : '../../businessSwitch/getBusinessSwitch',
			dataType : 'json',
			success : function(msg)
			{
				// 判断返回结果是否为空
				if(isEmpty(msg) || isEmpty(msg[0]))
				{
					// 提示数据加载失败
					alertError();
					return;
				}

				// 查询到的JSON对象
				var json = msg[0];

				// 赋值
				$('input[name=ulMask][value="' + json.ulMask + '"]').attr("checked",true);

				$('input[name=ucIMPExtensionCFU][value="' + json.ucIMPExtensionCFU + '"]').attr("checked",true);
				$('input[name=ucIMPExtensionCFNA][value="' + json.ucIMPExtensionCFNA + '"]').attr("checked",true);
				$('input[name=ucIMPExtensionCFB][value="' + json.ucIMPExtensionCFB + '"]').attr("checked",true);
				$('input[name=ucIMPExtensionCFNR][value="' + json.ucIMPExtensionCFNR + '"]').attr("checked",true);
				$('input[name=ucIMPExtensionCFNRY][value="' + json.ucIMPExtensionCFNRY + '"]').attr("checked",true);
				$('input[name=ucIMPBasicCall][value="' + json.ucIMPBasicCall + '"]').attr("checked",true);
				$('input[name=ucIMPAutoSwitchCall][value="' + json.ucIMPAutoSwitchCall + '"]').attr("checked",true);
				$('input[name=ucIMPAskSwitchCall][value="' + json.ucIMPAskSwitchCall + '"]').attr("checked",true);
			},
			error : function(XMLHttpRequest, textStatus, errorThrown)
			{
				// 提示数据加载失败
				alertError();
			}


[img]http://dl2.iteye.com/upload/attachment/0094/6866/22aaf279-7eaa-3526-a06f-799348f78feb.jpg[/img]

[b]checkbox的赋值和事件操作[/b] 
// 给每一个checkbox绑定方法
	$("input[type='checkbox']").bind("click", function(data) {
		var theEvent = window.event || e;
		var theObj = theEvent.target || theEvent.srcElement;
		if (theObj.checked == true) {
			$(this).attr("checked",true);

			$(this).parent().next().removeClass("invalid_td");
			$(this).parent().next().next().children("input").removeClass("invalid_td");
			$(this).parent().next().next().children("input").removeAttr("readonly");

			if ($(this).parent().next().parent().next().find("input").attr("type") != 'checkbox'
					&& $(this).parent().next().parent().next().find("input").attr("name") != 'ucIMPExtensionCoringGroupID') {
				$(this).parent().next().parent().next().children().removeClass("invalid_td");
				$(this).parent().next().parent().next().children("td").children("input").removeClass("invalid_td");
				$(this).parent().next().parent().next().children("td").children("input").removeAttr("readonly");
			}
		} else {
			$(this).attr("checked",false);
			if ($(this).parent().next().text() != "") {
				$(this).parent().next().addClass("invalid_td");
				$(this).parent().next().next().children("input").addClass("invalid_td");
				$(this).parent().next().next().children("input").attr("readonly", "readonly");

				if ($(this).parent().next().parent().next().find("input").attr("type") != 'checkbox'
						&& $(this).parent().next().parent().next().find("input").attr("name") != 'ucIMPExtensionCoringGroupID') {
					$(this).parent().next().parent().next().children().addClass("invalid_td");
					$(this).parent().next().parent().next().children("td").children("input").addClass("invalid_td");
					$(this).parent().next().parent().next().children("td").children("input").attr("readonly", "readonly");
				}
			}
		}
	});

$.ajax({
			type : 'POST',
			url : '../../supplementaryService/getSupplementaryService',
			dataType : 'json',
			success : function(msg) {
				// 判断返回结果是否为空
				if (isEmpty(msg) || isEmpty(msg[0])) {
					// 提示数据加载失败
					alertError();
					return;
				}

				// 查询到的JSON对象
				var json = msg[0];
				init_value = json;

				// 赋值
				$('input[name=bIMPExtensionCFUAdmin]').attr("checked", json.bIMPExtensionCFUAdmin == '1' ? true : false);
				$('input[name=ucIMPExtensionCFNAAdmin]').attr("checked", json.ucIMPExtensionCFNAAdmin == '1' ? true : false);
				$('input[name=ucIMPExtensionCFBAdmin]').attr("checked",json.ucIMPExtensionCFBAdmin == '1' ? true : false);
				$('input[name=ucIMPExtensionCFNRAdmin]').attr("checked", json.ucIMPExtensionCFNRAdmin == '1' ? true : false);
				$('input[name=ucIMPExtensionCFNRYAdmin]').attr("checked",json.ucIMPExtensionCFNRYAdmin == '1' ? true : false);
				$('input[name=ucIMPExtensionCallWaitAdmin]').attr("checked",json.ucIMPExtensionCallWaitAdmin == '1' ? true : false);
				$('input[name=ucIMPExtensionCallHoldAdmin]').attr("checked", json.ucIMPExtensionCallHoldAdmin == '1' ? true : false);
				$('input[name=ucIMPExtensionDNDAdmin]').attr("checked", json.ucIMPExtensionDNDAdmin == '1' ? true : false);
				$('input[name=ucIMPExtensionCallerIdAdmin]').attr("checked", json.ucIMPExtensionCallerIdAdmin == '1' ? true : false);
				$('input[name=ucIMPExtensionClockAdmin]').attr("checked", json.ucIMPExtensionClockAdmin == '1' ? true : false);
				$('input[name=ucIMPExtension3WayConfAdmin]').attr("checked", json.ucIMPExtension3WayConfAdmin == '1' ? true : false);
				$('input[name=ucIMPExtensionOipAdmin]').attr("checked", json.ucIMPExtensionOipAdmin == '1' ? true : false);
				$('input[name=ucIMPExtensionOirAdmin]').attr("checked", json.ucIMPExtensionOirAdmin == '1' ? true : false);
				$('input[name=ucIMPExtensionOiroverAdmin]').attr("checked", json.ucIMPExtensionOiroverAdmin == '1' ? true : false);
				$('input[name=ucIMPExtensionPswneedAdmin]').attr("checked", json.ucIMPExtensionPswneedAdmin == '1' ? true : false);
				$('input[name=ucIMPExtensionAbdialAdmin]').attr("checked", json.ucIMPExtensionAbdialAdmin == '1' ? true : false);
				$('input[name=ucIMPExtensionOutAdmin]').attr("checked", json.ucIMPExtensionOutAdmin == '1' ? true : false);
				$('input[name=ucIMPExtensionInAdmin]').attr("checked", json.ucIMPExtensionInAdmin == '1' ? true : false);
				$('input[name=ucIMPExtensionCbackWhenBusyAdmin]').attr("checked", json.ucIMPExtensionCbackWhenBusyAdmin == '1' ? true : false);
				$('input[name=ucIMPExtensionPickupAdmin]').attr("checked", json.ucIMPExtensionPickupAdmin == '1' ? true : false);
				$('input[name=ucIMPExtensionCoringAdmin]').attr("checked", json.ucIMPExtensionCoringAdmin == '1' ? true : false);
				$('input[name=ucIMPExtensionOrringiAdmin]').attr("checked", json.ucIMPExtensionOrringiAdmin == '1' ? true : false);
				$('input[name=ucIMPExtensionCycleAdmin]').attr("checked", json.ucIMPExtensionCycleAdmin == '1' ? true : false);
				$('input[name=ucIMPAutoSwitchCallAdmin]').attr("checked", json.ucIMPAutoSwitchCallAdmin == '1' ? true : false);
				$('input[name=ucIMPAskSwitchCallAdmin]').attr("checked", json.ucIMPAskSwitchCallAdmin == '1' ? true : false);

				$('input[name=aucIMPExtensionCFUCode]').val(json.aucIMPExtensionCFUCode);
				$('input[name=aucIMPExtensionCFNNYCode]').val(json.aucIMPExtensionCFNNYCode);
				$('input[name=aucIMPExtensionCFBCode]').val(json.aucIMPExtensionCFBCode);
				$('input[name=aucIMPExtensionCFNRCode]').val(json.aucIMPExtensionCFNRCode);
				$('input[name=ucIMPExtensionCfbidAdmin]').val(json.ucIMPExtensionCfbidAdmin);
				$('input[name=aucIMPExtensionCFNRCCode]').val(json.aucIMPExtensionCFNRCCode);
				$('input[name=aucIMPExtensionCallerIdCode]').val(json.aucIMPExtensionCallerIdCode);
				$('input[name=aucIMPExtensionClockTime]').val(json.aucIMPExtensionClockTime);
				$('input[name=aucIMPExtensionPswneedCode]').val(json.aucIMPExtensionPswneedCode);
				$('input[name=aucIMPExtensionUserCode]').val(json.aucIMPExtensionUserCode);
				$('input[name=aucIMPExtensionAbdialCode]').val(json.aucIMPExtensionAbdialCode);
				$('input[name=ucIMPExtensionOutCode]').val(json.ucIMPExtensionOutCode);
				$('input[name=ucIMPExtensionInCode]').val(json.ucIMPExtensionInCode);
				$('input[name=aucIMPExtensionCbackWhenBusyAddr]').val(json.aucIMPExtensionCbackWhenBusyAddr);

				$('input[name=ucIMPExtensionCoringGroupID]').val(json.ucIMPExtensionCoringGroupID);
				$('input[name=ucIMPExtensionOrringGroupID]').val(json.ucIMPExtensionOrringGroupID);
				$('input[name=ucIMPExtensionCycleGroupID]').val(json.ucIMPExtensionCycleGroupID);
				//				$('input[name=ucIMPAskSwitchCall][value="' + json.ucIMPAskSwitchCall + '"]').attr("checked",true);

				// foreach every checkbox, and initialize the td && input css
				$("input[type='checkbox']").each(function() {
					if ($(this).attr('checked') == 'checked') {
						$(this).parent().next().removeClass("invalid_td");
						$(this).parent().next().next().children("input")
								.removeClass("invalid_td");
						$(this).parent().next().next().children("input")
								.removeAttr("readonly");

						if ($(this).parent().next().parent().next()
								.find("input").attr("type") != 'checkbox'
								&& $(this).parent().next().parent().next()
										.find("input").attr("name") != 'ucIMPExtensionCoringGroupID') {
							$(this).parent().next().parent().next().children()
									.removeClass("invalid_td");
							$(this).parent().next().parent().next()
									.children("td").children("input")
									.removeClass("invalid_td");
							$(this).parent().next().parent().next()
									.children("td").children("input")
									.removeAttr("readonly");
						}
					} else {
						if ($(this).parent().next().text() != "") {
							$(this).parent().next().addClass("invalid_td");
							$(this).parent().next().next().children("input")
									.addClass("invalid_td");
							$(this).parent().next().next().children("input")
									.attr("readonly", "readonly");

							if ($(this).parent().next().parent().next()
									.find("input").attr("type") != 'checkbox'
									&& $(this).parent().next().parent().next()
											.find("input").attr("name") != 'ucIMPExtensionCoringGroupID') {
								$(this).parent().next().parent().next()
										.children().addClass("invalid_td");
								$(this).parent().next().parent().next()
										.children("td").children("input")
										.addClass("invalid_td");
								$(this).parent().next().parent().next()
										.children("td").children("input").attr(
												"readonly", "readonly");
							}
						}
					}
				});
			},
			error : function(XMLHttpRequest, textStatus, errorThrown) {
				// 提示数据加载失败
				alertError();
			}
		});

[img]http://dl2.iteye.com/upload/attachment/0094/6868/ac6d469d-ee39-34a9-b979-d77ff9a11ce0.jpg[/img]
乐邦666
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery单选框radio绑定click事件实现方法
10-24
主要介绍了jquery单选框radio绑定click事件实现方法,可实现针对单选框radio值的改变作出响应,非常具有实用价值,需要的朋友可以参考下
JQuery 绑定事件.bind() 绑定radio值
tianshibaijia
01-06 272
今天遇到了一个小问题，关于html中radio值绑定的问题，发现使用JQuery中的 .bind()事件可以更加有效的达到我需要的功能，作为笔记记录共享于此，提供给刚入门的新手们参考。 （哥哥我继续保持，每天一点点，十天一大块 的贡献精神，^-^ !!!） 废话不语，共享的代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1....
jQuery操作复选框(CheckBox)的取值赋值实现代码
10-20
本文将详细解释如何使用jQuery来获取和设置复选框的选中状态，以及删除特定的复选框。 首先，获取复选框选中状态的值可以通过几种不同的jQuery选择器来实现。比如，如果需要获取所有被选中的复选框的值，可以使用...
jQuery美化radio和checkbox
11-08
jQuery是一个轻量级、高性能的JavaScript库，它简化了DOM操作、事件处理和动画效果。通过引入jQuery库，开发者可以编写更简洁、更高效的代码来实现各种功能，包括美化表单元素。 对于美化radio和checkbox，通常有两...
JQuery触发radio或checkbox的change事件
10-27
在JQuery中，当给radio或checkbox添加一个change事件时，如果它的值发生变化就会触发change事件;本文将详细介绍如何利用JQuery触发Checkbox的change事件需要了解的朋友可以参考下
jQuery实现自定义checkbox和radio样式
10-23
jQuery 实现自定义 checkbox 和 radio 样式是一种常见的前端美化技术，它可以帮助开发者摆脱浏览器默认样式，创造出符合网站设计风格的交互元素。本篇将详细解释如何使用 jQuery 实现这一功能。 首先，我们要理解...
jQuery对表单元素的取值和赋值操作代码
12-01
在jQuery中，对表单元素进行取值和赋值是常见的操作，这在网页交互和数据处理中至关重要。以下是对给定标题和描述中的知识点的详细说明： 1. **文本框（TEXT.AREATEXT）的取值和赋值**： - 取值：`$("#text_id")[0...
Jquery为单选框checkbox绑定单击click事件
10-27
有些时候可能需要用到脚本为一些窗体绑定事件:比如Jquery为单选框checkbox绑定单击事件,本人搜索整理一些常用技巧，需要了解的朋友可以参考下
jquery获取选中单选按钮radio的值，监听type=radio的click事件
热门推荐
感恩、奋进、自信
09-23 3万+
html如下： 获取单选按钮中选中的值 $('input:radio[name="sex"]:checked').val();       //值为“女”  或者修改成： $('input[name="sex"]:checked').val();        //值为“女”
jquery单选框radio绑定click事件实现和是否选中的方法
weixin_30340819的博客
05-11 635
使用jquery获取radio的值,最重要的是掌握jquery选择器的使用，在一个表单中我们通常是要获取被选中的那个radio项的值，所以要加checked来筛选，比如有以下的一些radio项：1.<input type="radio" name="testradio" value="jquery获取radio的值" />jquery获取radio的值2.<input type=...
单选框radio改变事件详解（用的jquery的radio的change事件）
weixin_34185320的博客
05-23 2万+
单选框radio改变事件详解（用的jquery的radio的change事件） 一、总结 1、用的jquery的radio的change事件：当元素的值发生改变时，会发生 change 事件，radio选择不同选项的时候恰巧是值发生改变。 二、单选框radio改变事件详解 <input type="radio" name="bedStatus" id="allot"...
radio 切换效果 -JQuery绑定事件.bind() 绑定radio值
zl541907196的专栏
12-11 2618
页面radio切换效果，开始的时候用的是checked，这种方法在Firefox，google浏览器是没问题，可是在IE情况下，就不能识别判断radio的切换了， 因此使用的jquery的绑定click事件，判断radio的值，这样可以做出radio选中切换的效果了。 js如下://处理切换录入方式-begin $(function(){ $("input:radio[name='o
为多个checkbox绑定单击事件
weixin_34268169的博客
11-27 722
2019独角兽企业重金招聘Python工程师标准>>> ...
jquery通过代码触发radio或者checkbox的change事件
gis_zhouda的博客
02-20 4826
项目中有一个需求，需要通过jquery代码动态设置radio和checkbox的选中状态，而不是通过鼠标点击手动设置，并且需要动态触发radio和checkbox的change事件。 radio的一般是有一个组，此处，我使用的是mui，可到官网自行下载依赖的css和js文件。 <div class="mui-input-row mui-radio mui-left"> <lab
radio和checkbox的区别
最新发布
04-17
radio和checkbox都是HTML中的表单元素，但是它们的使用方式和作用不同。 Radio是单选按钮，通常用于选项之间有互斥关系的场景。例如，一份调查问卷中的单选题选项，只能选择一个。 Checkbox是复选框，允许用户选择多个选项，通常用于选项之间没有互斥关系的场景。例如，一个购物网站中的购物车，可以同时选择多个商品。 总之，Radio和Checkbox的主要区别在于：Radio只能选择一个，Checkbox可以选择多个。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值