$("#").attr("checked")获取的值是undefined的解决办法

所使用的jquery版本为jquery-1.9.1,浏览器为Chrome
1.通过prop方法获取checked属性,获取的checked返回值为boolean,选中为true,否则为flase
<input type="checkbox" id="selectAll" onclick="checkAll()">全选
function checkAll()
{
  var checkedOfAll=$("#selectAll").prop("checked");
  alert(checkedOfAll);
  $("input[name='procheck']").prop("checked", checkedOfAll);
}
2.如果使用attr方法获取时,如果当前input中初始化未定义checked属性,则不管当前是否选中,$("#selectAll").attr("checked")都会返回undefined;
<input type="checkbox" id="selectAll" onclick="checkAll()" >全选
如果当前input中初始化已定义checked属性,则不管是否选中,$("#selectAll").attr("checked")都会返回checked.
<input type="checkbox" id="selectAll" onclick="checkAll()" checked>全选
function checkAll()
{
  var checkedOfAll=$("#selectAll").attr("checked");
  alert(checkedOfAll);
  $("input[name='procheck']").attr("checked", checkedOfAll);
}
总结,如果使用jquery,应使用prop方法来获取和设置checked属性,不应使用attr.
var editor; var action = $.queryString("action"); var Pid = $.queryString("id"); $(function () { //设置返回列表的href, location_prior的href在后台打开当前记录信息时赋。 // $("#location_back").attr("href", $("#location_prior").attr("href")); //用户获取出来,获取本部门用户。 //获取本部门的权限, $.ajax({ type: "POST", url: "../services/Dtry.ashx", headers: { "Authorization": "0772A4AA051DDEBB393DC164B19A32E57C4FEEAB27A77820" }, data: { action: "names", id: Pid }, success: function (msg) { $.each(msg.ds, function (index, item) { if (item.pid == -1) { $(&#39;#qx&#39;).append(&#39;<div><ul><li> <input id="a&#39; + item.id + &#39;" type="checkbox" name="select_checkbox" onclick="chk_changed();" value="&#39; + item.id + &#39;" /><a class="sz" href="javascript:onClick=show(&#39; + item.id + &#39;)">&#39; + item.name + &#39;</a></li></ul><ul id="&#39; + item.id + &#39;"> </ul></div>&#39;); } else { $(&#39;#&#39; + item.pid).append(&#39;<li class="sc"> <input id="a&#39; + item.id + &#39;" type="checkbox" name="select_checkbox" onclick="chk_changed(this);" value="&#39; + item.id + &#39;"/><a class="zt" href="javascript:onClick=show(&#39; + item.id + &#39;)">&#39; + item.name + &#39;<br/><ul class="cc" style="display:none" id="&#39; + item.id + &#39;"> </ul></li>&#39;) } }) $(&#39;#typeid&#39;).val(Pid); } }); $(&#39;#user_nickname&#39;).on(&#39;change&#39;, getQ); //初始化表单验证 $("#form1").initValidform(); $(".rule-single-checkbox").ruleSingleCheckbox(); $(".rule-single-select").ruleSingleSelect(); // var result = ""; }); function chk_changed(that) { var th = $(that); if (th.is(&#39;:checked&#39;)) { console.log(&#39;已选中&#39;); } else { console.log(&#39;未选中&#39;); } th.next(&#39;a&#39;).find(&#39;input&#39;).attr("checked", "true"); th.parent().parent().siblings().find(&#39;input&#39;).attr("checked", "true"); th.parent().parent().parent().siblings().attr("checked", "true"); var result = ""; $("input[name=&#39;select_checkbox&#39;]:checked").each(function () { result += $(this).val() + &#39;,&#39;; }); if (result != "") { result = result.substring(0, result.lastIndexOf(&#39;,&#39;)); } $("#typename").val(result); } function show(d1) { if (document.getElementById(d1).style.display == &#39;none&#39;) { document.getElementById(d1).style.display = &#39;block&#39;; //触动的层如果处于隐藏状态,即显示 } else { document.getElementById(d1).style.display = &#39;none&#39;; //触动的层如果处于显示状态,即隐藏 } } var getQ = function () { var userid = $(&#39;#user_nickname&#39;).val(); if (userid == null || userid == undefined) { return false; } else { $.ajax({ type: "POST", url: "../services/Dtry.ashx", headers: { "Authorization": "0772A4AA051DDEBB393DC164B19A32E57C4FEEAB27A77820" }, data: { action: "getQ", id: userid }, success: function (msg) { $.each(msg.ds, function (index, item) { $(&#39;#a&#39; + item.typeid).attr("checked", true); }) var result = ""; $("input[name=&#39;select_checkbox&#39;]:checked").each(function () { result += $(this).val() + &#39;,&#39;; }); if (result != "") { result = result.substring(0, result.lastIndexOf(&#39;,&#39;)); } $("#typename").val(result); } }); } } 详细翻译代码内容
最新发布
03-11
<think>嗯,用户提供了一段JavaScript代码,让我详细翻译它的内容。首先,我需要通读这段代码,理解各个部分的功能和逻辑。看起来这是一个处理权限管理的界面,可能涉及用户选择部门或权限,并通过AJAX与后端交互。 首先,代码开头声明了变量editor、action和Pid。action和Pid是从URL参数获取的,可能用于标识当前的操作类型和页面ID。然后,在文档加载完成后执行的函数里,发起了一个AJAX POST请求,获取部门或权限的数据。这里需要注意URL指向的是Dtry.ashx,这可能是一个处理程序,返回JSON数据。 接下来,在success回调中,遍历返回的数据集msg.ds。根据pid是否为-1,动态生成HTML结构,创建复选框和链接。如果pid是-1,说明是顶级部门,否则是子部门。这里用jQuery的append方法动态添加元素,并为每个元素绑定点击事件,调用show函数展开或收起子部门。 然后是表单验证的初始化,可能使用了某个插件,比如initValidform方法。接着定义了change事件处理函数getQ,当用户昵称选择变化时触发,获取相关权限信息。 chk_changed函数处理复选框的选中状态,当复选框状态改变时,更新相关的DOM元素,并将所有选中的复选框的拼接成字符串,存入隐藏字段typename中。这里可能需要检查是否有逻辑错误,比如是否正确地处理了父级和子级的选中状态。 show函数控制子部门的显示和隐藏,通过切换display属性实现。最后,getQ函数通过AJAX请求获取用户已有的权限,并勾选对应的复选框,更新typename字段。 在翻译过程中,需要注意代码中的变量命名和逻辑,确保解释清晰。比如,权限树的结构是如何生成的,复选框的联动如何工作,以及AJAX请求的数据流程。同时,要指出可能的错误,比如在chk_changed函数中,使用attr("checked", "true")可能存在问题,因为jQuery推荐用prop方法设置属性。此外,生成HTML字符串时是否存在XSS风险,比如直接拼接item.name,可能需要转义处理。 用户的需求是理解这段代码的功能,可能需要一个结构化的解释,分模块说明各部分的作用,以及整个脚本的业务逻辑。同时,作为助手,应该指出潜在的问题和改进建议,帮助用户优化代码。</think>这是一个基于jQuery实现的权限管理系统界面交互代码,主要功能是通过树形结构展示部门/权限层级,并支持勾选操作。以下是模块化解析: 一、**初始化模块** (第1-38行) 1. `var editor; var action...` - 声明全局变量:编辑器实例/操作类型/父级ID 2. `$(function(){...})` - 页面加载后初始化权限树 - 发起AJAX POST请求获取权限数据:`../services/Dtry.ashx?action=names&id=Pid` - 使用`$.each`遍历返回的`msg.ds`数据集动态生成DOM结构 二、**树形结构生成逻辑** ```javascript if(item.pid == -1) { // 根节点 $(&#39;#qx&#39;).append(`<div> <ul> <li><input id="a${item.id}" type="checkbox".../> <a class="sz" onclick="show(${item.id})">${item.name}</a> </li> </ul> <ul id="${item.id}"></ul> // 子容器 </div>`); } else { // 子节点 $(`#${item.pid}`).append(`<li class="sc"> <input id="a${item.id}".../> <a class="zt" onclick="show(${item.id})">${item.name}</a> <ul class="cc" id="${item.id}" style="display:none"></ul> </li>`); } ``` 三、**核心功能函数** 1. **复选框联动** `chk_changed(that)` - 通过`$(that).is(&#39;:checked&#39;)`检测状态变化 - 自动勾选相邻节点:`parent().siblings().find(&#39;input&#39;)` - 拼接选中到隐藏域:`$("#typename").val("1,2,3")` 2. **层级展开/折叠** `show(d1)` - 通过`style.display`切换子菜单可见性 - `block`展开 / `none`折叠 四、**权限加载模块** `getQ()` 1. 监听用户选择变化:`$(&#39;#user_nickname&#39;).on(&#39;change&#39;)` 2. 发起AJAX请求获取用户已有权限:`action=getQ&id=用户ID` 3. 动态勾选对应复选框:`$(&#39;#a&#39;+item.typeid).attr("checked",true)` 五、**技术细节说明** 1. **安全验证**:请求头包含固定Authorization令牌 ```javascript headers: {"Authorization": "0772A4AA05...7A77820"} ``` 2. **表单验证**:使用`initValidform()`插件初始化验证规则 3. **DOM操作**:大量使用jQuery链式操作处理节点关系 4. **数据存储**:最终选中存储在`<input type="hidden" id="typename">` 六、**潜在改进建议** 1. 当前使用`attr("checked", true)`应改为`prop("checked", true)` 2. 字符串拼接存在XSS风险,建议对`item.name`进行HTML转义 3. 树形结构渲染可优化为模板引擎或组件化实现 4. 权限勾选逻辑应增加父子级联动功能 该代码实现了一个典型的RBAC(基于角色的访问控制)前端界面,通过异步加载+动态DOM操作,构建可交互的权限树形选择器。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值