使用jQuery设置元素选中的问题及解决办法

现在界面操作的js脚本很多人都是使用的jquery了吧,这其中就有很多的什么控制checkbox的选中与不选中啊什么的(特别是这个在做“全选”的时候很有用),还有就是某些时候的多选模式下的select的option的选中。

前段时间,公司开始了一个项目,里面就用到了jquery和jquery-ui,里面正好就有“全选”功能和多选模式的select,下面就来说说这里面遇到的坑。

由于要兼容IE10的版本,所以只能用1.X的版本,然后又用了jquery-ui,所以最终定的版本就是1.11.4.

这里面遇到的坑,其实都是由于一个原因引起的————使用了错误的方法!

表现出来的现象是这样子的:

(用checkbox做“全选”举例哈)加载页面后,设置checkbox的“checked”属性为true

$(".list_checkbox").attr("checked", $(this).is(":checked"));

设置之后呢,就是符合预期的,通过firebug查看界面的及时html代码,可以看到,其实是在checkbox中加了

checked="checked"

然后取消“全选”,就把这个去掉了,也就取消了选中状态,这很好理解,到目前为止都还是符合预期的。

但是接下来就不知道是怎么回事了,再次点击“全选”,在html代码的checkbox中也确实添加了

checked="checked"

但是却没有表现出来“选中”的效果,单独去点击选中也是可以选中的。

相似的现象还会出现在开启了“多选”模式的select的option的选中的时候。

解决办法,在网上查阅了一下,原来是用错了方法!!

不应该使用attr()方法,而应该使用prop()方法,这个修改是在1.6开始的。详细的介绍可以参考一下:jquery无法设置checkbox选中即没有变成选中状态

这里来贴一下“全选”的代码:

    // “全选”checkbox
    $(".list_checkall").click(function() {
        $(".list_checkbox").prop("checked", $(this).is(":checked"));
    });
    // 子复选框勾选情况对全选勾选框的影响
    $(".list_checkbox").click(function() {
        // 有一个没有选中则取消全选
        if (!this.checked) {
            $(".list_checkall").prop("checked", false);
            return;
        }
        // 选中的数目和总数目相等,加上全选
        var chsub = $(".list_checkbox").length;
        var checkedsub = $(".list_checkbox:checked").length;
        if (checkedsub == chsub) {
            $(".list_checkall").prop("checked", true);
        }
    });

“全选”的checkbox设置class为“list_checkall”,其他的需要被选择的checkbox设置class为“list_checkbox”。这个处理还会对checkbox已经被选中的数目进行判断处理,在全部都分别选中之后自动选中“全选”的checkbox;同理,在“全选”之后,取消某一个的选中状态,也会取消“全选”的选中。

对于select,开启“多选”模式

<select multiple="multiple" class="select_chosen" name="speakerIDs[]"></select>

里面的option使用其他的js添加,提交时,为了确保这个select里面的option都会被提交,需要将所有的option设置为“选中”,使用的语句为

$(".select_chosen option").prop("selected",true);

有点乱,想到哪里写到哪里了,大家将就看吧,不好意思哈!

enjoy!

时间: 2024-10-28 20:13:18

使用jQuery设置元素选中的问题及解决办法的相关文章

JQuery设置checkbox选中或取消等相关操作

$("[name='checkbox']").attr("checked",'true');//全选 $("[name='checkbox']").removeAttr("checked");//取消全选 $("[name='checkbox']:even").attr("checked",'true');//选中所有奇数 //获取选择的值 var str=""; $

jquery 设置checkbox选中 和获取选中值

经常用到经常网上搜,这次写下来. 1,设置选中: $('#nrowid').prop('checked', false); 2,取选中项的值: $('#nrowid').prop("checked") || false; jquery 设置checkbox选中 和获取选中值

jquery设置元素readonly与disabled属性的方法

分享下jquery设置元素readonly与disabled属性的方法,设置元素的显示与隐藏,元素的只读属性. 以下内容转自:http://www.jbxue.com/article/15102.html 略作修改与补充. Jquery的api中提供了对元素应用disabled和readonly属性的方法: 1,设置readonly属性 $('input').attr("readonly","readonly")//将input元素设置为readonly $('in

jquery IE6 select.val() bug报错解决办法

原文地址:http://hi.baidu.com/kinghmx/item/395dbac3261292dcef183b52 最近在写一个页面,在出了ie6外的所有浏览器中都正常(ie7,8,9,  firefox, chrome), IE6下提示 “无法设置selected属性.未指明的错误”. 后来发现是jquery 在 ie6 下操作 select控件有BUG. 我程序中是这样使用的: $("#genre").val(0); 改成: setTimeout(function(){ 

append()方法生成的元素绑定的事件失效解决办法

我使用append()方法动态生成的a链接的click事件没有起效果,查找了资料,了解到,我使用的onclick方法绑定的事件对动态生成的元素是无效的,解决办法如下: 使用事件委托,并且要用on来绑定未来事件: $(父节点).on("事件","目标节点",function(){}) 我这里的例子是: $('#com').on("click",".comment",function(e){}) 问题解决了.

jquery设置select选中的文本

<select id="prov">  <option value="1">北京市</option>  <option value="2">上海市</option>  <option value="3">天津市</option> </select> 用jquery设置上面select选中的文本 //第一种方式 var count =

jquery设置select选中

/*设置select选中开始*/ var prod_type=$('.prod_type').val(); //alert(prod_type); var select = document.getElementById("prod_type_name"); for(var i=0; i<select.options.length; i++){ if(select.options[i].value == prod_type){ select.options[i].selected

JQuery 设置元素的高度和宽度相等

有时需要设置下面的情况,即 <div> 的高度和宽度是相等的.并且随着屏幕的大小变化而变化.这样就需要用 js 来控制元素在页面上的显示. <html> <body> <div class="row text-center margin-top-20p"> <div class="col bgcolor-FF9600 border-radius-5p margin-2p height-width"> <

jquery中动态新增的元素节点无法触发事件解决办法

在使用jquery中动态新增的元素节点时会发现添加的事件是无法触发的,我们下面就为各位来详细的介绍此问题的解决办法. 比如做一个ajax读取留言列表的时候,每条留言后面有个回复按钮,class为“reply”,如果你用的是$(".reply").click(function(){ //do something... }),想必后面通过ajax加载进来的列表中的回复按钮,点击事件会失效. 其实最简单的方法就是直接在标签中写onclick="",但是这样写其实是有点lo