• 解决jquery操作checkbox火狐下第二次无法勾选问题


    最近在学习jQuery(版本jquery-1.9.1.js),要求用jQuery实现全选/全不选、反选,在IE(IE8)中没有问题,但在火狐浏览器中调试的时候出现了一些小问题,达不到效果。
    html代码如下:

    <div>
            你爱好的运动是
            <input type="checkbox" id="selectal1" /><label for="selectal1">全选/全不选</label><br/>
    
            <input name="intrest"  type="checkbox" />足球
            <input name="intrest"  type="checkbox" />篮球
            <input name="intrest"  type="checkbox" />羽毛球
            <input name="intrest"  type="checkbox" />乒乓球<br/>
            <button id="allbtn">全选</button>
            <button id="notallbtn">全不选</button>
            <button id="reversebtn">反选</button>
            <button>提交</button>
        </div>

    jQuery代码:

    <script type="text/javascript" src="jquery-1.9.1.js"></script>
    <script type="text/javascript">
        $().ready(function(){
            //全选/全不选复选框
            $("#selectal1").click( function(){
                if($(this).attr("checked")==true){
                    $("input:checkbox[id!='selectal1']").each(function() {
                        $(this).attr("checked",true);
                    });
                }else{
                    $("input:checkbox[id!='selectal1']").each(function() {
                        $(this).attr("checked",false);
                    });
                }
            });
            //全选按钮
            $("#allbtn").click(function(){
                $("input:checkbox[id!='selectal1']").each(function() {
                    $(this).attr("checked",true);
                });
            });
            //全不选按钮
            $("#notallbtn").click(function(){
                $("input:checkbox[id!='selectal1']").each(function() {
                    $(this).attr("checked",false);
                });
            });
            //反选按钮
            $("#reversebtn").click(function(){
                $("input:checkbox[id!='selectal1']").each(function() {
                    $(this).attr("checked",!$(this).attr("checked"));
                });
            });
        })
    </script>

    复选框绑定了click事件,点一次选中,再点击取消选中,依次类推。这个功能在IE8中没问题,但是在firefox中测试的时候,前两次都没有问题,可以正常显示选中和取消,但当再去选中的时候,复选框的属性checkbox值变为”checked”,没问题,但是复选框却不在显示选中状态,明明属性值改了,但是却不显示勾选,我以为是浏览器缓存的问题,但是删除缓存还是不行……..后来在网上看到了方法,说是jQuery版本的问题,jQuery1.6以上用attr会存在兼容性问题,得换成prop
    查了下API prop属性是这样的:

    prop(name|properties|key,value|fn)
    概述
    获取在匹配的元素集中的第一个元素的属性值。
    随着一些内置属性的DOM元素或window对象,如果试图将删除该属性,浏览器可能会产生错误。jQuery第一次分配undefined值的属性,而忽略了浏览器生成的任何错误

    jQuery API明确说明,1.6+的jQuery要用prop,尤其是checkBox的checked的属性的判断,于是乎把js代码里面的attr换成prop就行了
    代码:

    //1.6+的jQuery要用prop代替attr否则达不到效果!!!!
            //全选/全不选复选框
            $("#selectal1").click( function(){
                if($(this).prop("checked")==true){
                    $("input:checkbox[id!='selectal1']").each(function() {
                        $(this).prop("checked",true);
                    });
                }else{
                    $("input:checkbox[id!='selectal1']").each(function() {
                        $(this).prop("checked",false);
                    });
                }
            });
            //全选按钮
            $("#allbtn").click(function(){
                $("input:checkbox[id!='selectal1']").each(function() {
                    $(this).prop("checked",true);
                });
            });
            //全不选按钮
            $("#notallbtn").click(function(){
                $("input:checkbox[id!='selectal1']").each(function() {
                    $(this).prop("checked",false);
                });
            });
            //反选按钮
            $("#reversebtn").click(function(){
                $("input:checkbox[id!='selectal1']").each(function() {
                    $(this).prop("checked",!$(this).prop("checked"));
                });
            });

    希望对大家有所帮助^_^

    http://huangxiutao.cn
  • 相关阅读:
    2018.10.10python homework
    2018.10.10python学习第十六天part3
    2018.10.10python学习第十六天part2
    2018.10.10python学习第十六天part1
    2018.09.28python学习第十三天part3
    2018.09.28python学习第十三天part2
    2018.09.28python学习第十三天part1
    当不搞技术好几年后,又回来了,忽然很亲切
    福大软工 · BETA 版冲刺前准备(团队)
    事后诸葛亮
  • 原文地址:https://www.cnblogs.com/ss0xt/p/6667183.html
Copyright © 2020-2023  润新知