如何在使用value和rel属性更改选项元素时检查复选框
how to check checkboxes on change of option element using value and rel attributes
我有一个包含下拉列表的页面。options元素包含值的id。关于变化,我张贴和做一个sql查询来获取与选项值匹配的所有项目id。然后我要将checked属性添加到匹配的复选框中。如果有意义的话。
我的选择列表:value属性是collection_id
<select required="" name="groupSelectList" id="groupSelectList">
<option value="#">Group…</option>
<option value="1">guest: The default group. Users that have not registered</option>
<option value="2">customer: The default group for users that are customers and have an account</option>
<option value="3">support: The default group for users of type Support</option>
<option value="4">site_admin: The site administrator</option>
<option value="5">support_admin: For the Support department Manager, VP etc.</option>
<option value="26">testing group 2: This is another disposable group made just for testing</option>
<option value="25">testing group 1: This is a disposable group. Group #1</option>
<option value="24">test43: test43 description</option>
<option value="23">test from new page: testing group to be deleted</option>
</select>
我的复选框:rel/value属性是permission_id的
<ul class="four_up tiles">
<li class="tile field">
<label for="delete" class="checkbox">
<input type="checkbox" rel="1" value="1" id="delete" class="cb" name="checkbox">
<span></span> delete</label>
</li>
<li class="tile field">
<label for="administrate" class="checkbox">
<input type="checkbox" rel="2" value="2" id="administrate" class="cb" name="checkbox">
<span></span> administrate
</label>
</li>
<li class="tile field">
<label for="view" class="checkbox checked">
<input type="checkbox" rel="3" value="3" id="view" class="cb" name="checkbox">
<span><i class="icon-check"></i></span> view
</label>
</li>
<li class="tile field">
<label for="edit" class="checkbox">
<input type="checkbox" rel="4" value="4" id="edit" class="cb" name="checkbox">
<span></span> edit
</label>
</li>
<li class="tile field">
<label for="create" class="checkbox checked">
<input type="checkbox" rel="5" value="5" id="create" class="cb" name="checkbox">
<span><i class="icon-check"></i></span> create
</label>
</li>
<li class="tile field">
<label for="Test23" class="checkbox checked">
<input type="checkbox" rel="6" value="6" id="Test23" class="cb" name="checkbox">
<span><i class="icon-check"></i></span> Test23
</label>
</li>
<li class="tile field">
<label for="testing24" class="checkbox">
<input type="checkbox" rel="7" value="7" id="testing24" class="cb" name="checkbox">
<span></span> testing24
</label>
</li>
<li class="tile field">
<label for="todays editor" class="checkbox">
<input type="checkbox" rel="8" value="8" id="todays editor" class="cb" name="checkbox">
<span></span> todays editor
</label>
</li>
<li class="tile field">
<label for="perm name here" class="checkbox">
<input type="checkbox" rel="9" value="9" id="perm name here" class="cb" name="checkbox">
<span></span> perm name here
</label>
</li>
<li class="tile field">
<label for="yada ydada ydada" class="checkbox">
<input type="checkbox" rel="10" value="10" id="yada ydada ydada" class="cb" name="checkbox">
<span></span> yada ydada ydada
</label>
</li>
<li class="tile field">
<label for="test46" class="checkbox">
<input type="checkbox" rel="11" value="11" id="test46" class="cb" name="checkbox">
<span></span> test46</label>
</li>
</ul>
和jquery:
// set checks on permissions fieldset
$("#groupSelectList").on('change', function() {
var slct = $(this).val();
//alert(slct);
$.ajax({
type: 'post',
url: 'ajax-processing.php',
data: {gid: slct, d: 'yes'},
dataType: 'json',
success: function(data) {
var mssg = data.msg;
var list = mssg.replace(/^-|-$/g,'');
var itemArr = list.split('-');
for(var i = 1; i < itemArr.length; i++) {
//alert("input[rel='"+[i]+"']");
$("input[name='checkbox']").each(function() {
if($(this).attr("rel") === [i]) {
$("input[rel='"+[i]+"']").attr("checked","checked");
}
});
}
//$("<p class='alert info'>"+data.msg+" cleaned = "+list+"</p>").prependTo("#setPermsToSelectedGroup_");
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
$("<p class='alert danger'><i class='entypo icn-thumbs-down'></i>"+errorThrown+"</p>").prependTo("#setPermsToSelectedGroup_");
}
});
});
我的MySQL查询返回一个"-"分隔的permission_ids列表基于一个查找表,包含2个id的collection_id和permission_id。然后使用Javascript split()拆分权限id列表,然后尝试遍历所有复选框以从rel或value的复选框属性中找到匹配项,两者都可以工作-此时我想将属性checked=checked设置为相应的复选框。我认为我的jQuery是错误的。我知道select on change正在工作,我的MySql运行,返回的值正是我所期望的。如有任何帮助,我将不胜感激。
和响应:
{"error":false,"msg":"5-4-3-2-1-"}
使用评论中建议的选择器,再加上我自己的一些反思,这就是我最终得到的解决方案。说明如下:
for(var i = 0; i < itemArr.length; i++) {
$("input[name='checkbox']").each(function() {
if($(this).attr("rel") === itemArr[i]) {
var targ = $(".cb[rel='"+itemArr[i]+"']").next();
$("<i class='entypo icon-check'></i>").appendTo(targ);
$(".cb[rel='"+itemArr[i]+"']").parent("label").addClass("checked");
}
});
}
现在坦白一下。不需要添加属性,我需要用一个选中的图标附加兄弟跨度,因为我使用的是Gumby css框架,这就是处理样式复选框的方式。所以有了正确的选择器,我就能解决这个问题了谢谢大家
选择器创建时出现问题。您使用的是for
循环的索引,而不是与该索引匹配的数组元素。在每次循环new array
应该可以
for(var i = 1; i < itemArr.length; i++) {
$(".cb[rel="+ itemArr[i] +"]").prop('checked', true);
}
相关文章:
- 根据select选项元素将表单重定向到不同的URL
- 只有当Angular从资源对象检索数据时,才选择选项元素
- jQuery 隐藏选项元素
- 根据选择选项元素将表单重定向到不同的URL,并在电子邮件中获取表单详细信息
- 无法在 IE 中设置选项元素的属性
- 选择/选项元素中的javascript事件OnKeyUp根本不起作用
- 如何知道选项元素是否设置了值属性
- JavaScript - 有没有更有效的方法来创建选项元素
- 如果我通过 Javascript 更改<选项>元素上的属性“选定”会发生什么
- 更改动态添加的选择选项元素的名称
- 尝试从选项元素获取 HTML
- 为什么 Chrome 在使用后退按钮后不显示选定的<选项>元素
- AngularJS在有效的ajax数据到达之前设置伪选项元素
- 如何在jQuery中获取选中的选项元素attr
- 你能在选项元素上设置点击事件吗?(Angular v2.0.0-beta.0)
- 事件外选项元素的Meteor值
- sort选择选项元素
- 在IE中使用.innerHTML添加选项元素无效
- select2.js-如何在选项元素内对齐两个项目
- 在IE中使用. innerhtml添加选项元素