为了兼容ie FF chrome等主流浏览器，对事件部分作了修改：
radio的赋值和事件操作
// 绑定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();
}
checkbox的赋值和事件操作
// 给每一个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();
}
});
- 大小: 24.2 KB
- 大小: 92.2 KB
分享到：
相关推荐
jQuery提供了丰富的事件处理函数，如`.click()`, `.change()`, `.focus()`等，可以监听用户对radio和checkbox的操作。例如，当用户点击一个radio按钮时，可以触发一个事件来更新其他同组radio的样式，确保只有一个被...
jQuery是一个轻量级、高性能的JavaScript库，它简化了DOM操作、事件处理和动画效果。通过引入jQuery库，开发者可以编写更简洁、更高效的代码来实现各种功能，包括美化表单元素。 对于美化radio和checkbox，通常有两...
这些是jQuery对Radio、Checkbox和Select基本的操作方式。在实际应用中，你可能还需要结合DOM遍历、事件冒泡等知识，实现更复杂的交互功能。提供的Demo文件应该包含了这些操作的实例代码，通过查看和实践，可以加深...
本篇文章将深入探讨如何使用jQuery来操作checkbox和radio元素，这两种元素在表单提交和用户交互中扮演着重要角色。 首先，让我们了解checkbox和radio的基本概念。Checkbox用于提供多选选项，用户可以勾选多个选项；...
总的来说，通过本文的学习，我们了解了Jquery为单选框checkbox绑定单击事件的方法和最佳实践，这些知识点对于进行前端开发的工程师来说非常实用。在实际开发过程中，灵活运用这些方法可以有效地增强网页的交互性和...
本文将详细解释如何使用jQuery来获取和设置复选框的选中状态，以及删除特定的复选框。 首先，获取复选框选中状态的值可以通过几种不同的jQuery选择器来实现。比如，如果需要获取所有被选中的复选框的值，可以使用...
在网页开发中，jQuery是一个非常流行的JavaScript库，它极大地简化了DOM操作、事件处理、动画效果和Ajax交互。本文将详细讲解如何使用jQuery来操作checkbox，并实现全选、全不选、反选以及获取选中值这四个核心功能...
在网页开发中，jQuery是一个非常流行的JavaScript库，它极大地简化了DOM操作、事件处理和Ajax交互等任务。本文将深入探讨如何使用jQuery来实现复选框（checkbox）的选中和取消选中功能，以及如何处理多选的情况。 ...
在JQuery中，当给radio或checkbox添加一个change事件时，如果它的值发生变化就会触发change事件;本文将详细介绍如何利用JQuery触发Checkbox的change事件需要了解的朋友可以参考下
jQuery插件只可以用val方法给input标签的text、...而checkbox、radio属性和select标签就无法直接赋值，必须用遍历的方法使对应项选中。 我自己写了一个jQuery的插件，可以直接用setval方法像赋值一样设定选中项。
在网页设计中，jQuery是一种广泛使用的JavaScript库，它极大地简化了DOM操作、事件处理和动画效果。本主题聚焦于“jQuery radio checkbox美化”，这涉及到如何使用jQuery和其他前端技术改进默认的HTML复选框...
本篇将详细探讨如何利用jQuery实现表格中checkbox的相关事件操作，包括动态添加行、隔行换色、选中变色、全选与反选等功能。 首先，让我们了解jQuery的基本概念。jQuery是一个快速、简洁的JavaScript库，它简化了...
昨天网上找了很多关于设置select checkbox radio只读的，都没办法满足要求，自己写了一个
在JavaScript的世界里，jQuery库提供了一种简洁的方式来操作DOM元素，包括处理radio、checkbox和select。这些元素在网页表单中十分常见，用于收集用户输入。以下是对标题和描述中涉及的知识点的详细说明： 1. **...
总的来说，实现透明的Radio和CheckBox需要理解WM_CTLCOLOR消息、控件的背景模式设置以及可能的位图操作。通过这些技术，我们可以创建出符合设计需求的美观且具有透明效果的用户界面。在实际项目中，还可以结合资源...
通过以上分析，我们可以看出“jquery模拟div多选checkbox下拉框”是一个结合了jQuery、DOM操作、事件处理、CSS定制和数据管理的综合性组件。开发者在使用这个压缩包中的`selectbox`文件时，只需按照提供的API和示例...
由于浏览器的安全策略，直接操作radio和checkbox的样式受到限制，但我们可以通过给它们的父元素或者相邻元素设置样式，间接实现美化。以下是一些常用的技术： 1. **隐藏原生元素**：首先，我们可以使用`display: ...
这些美化的radio和checkbox不仅在视觉上打破了传统的单一形态，还可能在交互反馈上有所创新，例如，选中时的动画效果、颜色变化或者形状变换，以明确告知用户操作状态。 在使用这些美化组件时，开发者需要注意兼容...
### jQuery与JavaScript操作Checkbox全选反选 #### 一、引言 在Web开发中，Checkbox（复选框）是一种非常常见的用户界面元素，用于收集用户的多选输入。尤其是在表单设计时，Checkbox的全选与反选功能极大地方便了...