jquery中单选选中及清除选中状态

Posted 沫沫w

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jquery中单选选中及清除选中状态相关的知识,希望对你有一定的参考价值。

不管是checkbox(多选)还是radio(单选) 添加checked属性时候建议用prop而不用attr

单选用attr点击一次添加checked="checked"属性,点击第二次页面上才显示选中状态

多选用attr只有第一次点击有效,其余的不会标识为选中状态

 ////1、单选示例

//html代码      
<ul>
                    <li class="li_check">
                        <input class="check_box" checked="checked" type="radio" name="sort" value="1" id="sort_one" /><label for="sort_one">1</label>
                    </li>
                    <li class="li_check">
                        <input class="check_box" type="radio" name="sort" value="2" id="sort_two" /><label for="sort_two">2</label></li>
                    <li class="li_check">
                        <input class="check_box" type="radio" name="sort" value="3" id="sort_three" /><label for="sort_three">3</label></li>                
                </ul>

 

//js代码
 $(".check_box").click(function () {
            if ($(this).prop("checked") != "checked")
            {
                $(".check_box").each(function () {
                    $(this).removeAttr("checked");
                });
                $(this).prop("checked", "checked");
            }

        });

 

///2、多选示例

 

//html代码
<span class="check-all">全选</span>
<ul> <li class="li_check"> <input class="check_box" checked="checked" type="checkbox" name="sort" value="1" id="sort_one" /><label for="sort_one">1</label> </li> <li class="li_check"> <input class="check_box" type="checkbox" name="sort" value="2" id="sort_two" /><label for="sort_two">2</label></li> <li class="li_check"> <input class="check_box" type="checkbox" name="sort" value="3" id="sort_three" /><label for="sort_three">3</label></li> </ul>
//js代码
  $(".check_box").click(function () {
            if ($(this).attr("checked") == "checked") {
                $(this).removeAttr("checked", "checked");
            }
            else {
                $(this).attr("checked", "checked");
            }
        });
       
        $(function () {
            var click = 0;
            $(".check-all").click(function () {
                click = click + 1;
                if (click % 2 == 1) {
                    $(".check_box").prop("checked", "checked");
                    $(".check_box").each(function () {
                        $(this).attr("checked", "checked");
                    });
                }
                else {
                    $(".check_box").removeAttr("checked", "checked");
                    $(".check_box").each(function () {
                        $(this).removeAttr("checked", "checked");
                    });
                }

            });
        });

 

以上是关于jquery中单选选中及清除选中状态的主要内容,如果未能解决你的问题,请参考以下文章

vb.net 点击按钮选中listview最后一行

jquery循环遍历radio单选按钮,并设置选中状态

jquery中怎么设置一个radio为选中状态

jquery设置判断获取input单选标签选中状态

jsp中单选框怎么调节的不可选

jQuery UI 单选按钮 - 如何正确切换选中状态