jquery对radio单选框和CheckBox复选框的操作

radio单选：输出选择的值。

checkbox复选及全选：判断是否为全选，输出选择的值。

我用的jq版本为1.11版

代码如下：

html

<body>
<div id="select-only-one">
    <input type="radio" name="city" value="BeiJing">北京
    <input type="radio" name="city" value="TianJin">天津
    <input type="radio" name="city" value="NanJing">南京
    <input type="radio" name="city" value="YangZhou">扬州
    <input type="radio" name="city" value="SuZhou">苏州
</div>
<div id="radio-result"></div>

<div id="select-more">
    <input type="checkbox" id="select-all" name="all">全选
    <input type="checkbox" name="address" value="BeiJing">北京
    <input type="checkbox" name="address" value="TianJin">天津
    <input type="checkbox" name="address" value="NanJing">南京
    <input type="checkbox" name="address" value="YangZhou">扬州
    <input type="checkbox" name="address" value="SuZhou">苏州
</div>
<div id="address-result"></div>

 $(document).ready(function () {
//        radio单选
        $('#select-only-one input[name="city"]').click(function () {
            var a = $('#select-only-one input[name="city"]:checked').val();
            $("#radio-result").html(a);
        });

//      checkbox全选和复选
        $("#select-all").click(function () {
            if($(this).prop("checked")==true){
                $('#select-more input[name="address"]').each(function () {
//                    全选
                    $(this).prop("checked","checked");
                });
            } else if($(this).prop("checked")==false){
                $('#select-more input[name="address"]').each(function () {
//                    全不选
                    $(this).removeProp("checked");
                });
            }
            str();
        });

        $('#select-more input[name="address"]').click(function () {

            str();

        });

        function str() {
            var a = "";
            var i = 0;
//            获取选项个数
            var b = $("input[name='address']").length;
            $('#select-more input[name="address"]:checked').each(function () {
//                显示选取的值
                a += $(this).val()+"|";
                i++;//选取的个数
            });
//            控制全选按钮是否选中
            if(i<b){
                $("#select-all").removeProp("checked");
            }
            else{
                $("#select-all").prop("checked","checked");;
            }
            $("#address-result").html(a);
        }

    })

radio单选是没啥疑问的，主要问题是出在checkbox上。

我们要怎么判断这个复选框是否被选中呢？

很多人的第一反应是attr("checked")，但是这是不行的。我们把这个值alert出来会发现这个值是undefined。

经过查资料得到，从JQ的1.6版本开始新增加了一个prop()函数,用于解决1.6 之前，使用 attr() 有时候会出现不一致的行为。

这两个函数都是用于：设置或返回被选元素的属性和值。

所以我们什么时候应该用prop(),什么时候应该用attr()呢？

官方给出的建议是：具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()。

但是现在我纠结的两点在于：
1.当我们设置了checked属性之后，用开发者工具查看HTML元素，是不会显示checked属性的。
2.移除属性的时候除了removeProp(),removeAttr()也是可以用的。

如果你也遇到了同样的问题，或者能解答我的疑惑，欢迎和我交流ヽ(￣▽￣)ﾉ

jquery对radio单选框和CheckBox复选框的操作

猜你喜欢