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");
                    });
                }

            });
        });

原文地址:https://www.cnblogs.com/KnowEditByW/p/8462463.html

时间: 2024-10-30 20:34:08

jquery中单选选中及清除选中状态的相关文章

js、jquery中判断checkbox是否被选中的方法

在js中: document.getElementById("checkboxID").checked   返回true或者false jQuery中: $("input[type='checkbox']").is(':checked') 返回true或false attr()方法  设置或者返回备选元素的值 attr(属性名)    //获取属性的值 attr(属性名,属性值)   //设置属性的值 ---- $("#id]").attr(&q

jQuery如何判断和设定单选多选是否选中??

  如何判断HTML中的单选多选是否选中呢?  这是web编程中最常用的判断,可是前段时间,却遇到了一个很奇怪的问题. 我想很多人会这样判断 if($("#weixuanzhong").attr("checked")=="checked")//选中时 { } 但如果是如下的HTML代码: <input type="checkbox" checked="checked" value="male

JQuery判断radio(单选框)是否选中和获取选中值方法总结

篇文章主要介绍了JQuery判断radio(单选框)是否选中和获取选中值方法总结,本文讲解了利用获取选中值判断选中.使用checked属性判断选中.jquery获取radio单选按钮的值.获取一组radio被选中项的值.设置单选按钮被选中等内容,需要的朋友可以参考下 一.利用获取选中值判断选中 直接上代码,别忘记引用JQuery包 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

JQuery中的id选择器含有特殊字符时,不能选中dom元素的解决方法

1.jquery类库在我们实际项目中用的很多,大家经常需要根据控件的id,获取对应的html元素.但是:当id含有特殊字符的时候,是不能选中的. 2.自己简单的测试了下,jquery的id选择器只支持,单词.阿拉伯数字.下划线.中划线.其中单词,包括英文字母.汉字,但是控件id属于客户不可见内容,实际中开发人员是不用汉字作为id的,这里不考虑. 3.自己写了一个工具方法,开人人员只要将id转义后,jquery就能选中了,不用再考特殊字符的问题.代码是基于jquery1.6版本. function

sharepoint ECMA PeopleEditor 清除选中的中的人员

当我们在用sharepoint中自带的人员选择器PeopleEditor的时候,有的时候会用js来清除选择的人员,这个时候就需要用到下面的的几段代码: var currentPeopleEditorID="ctl00_PlaceHolderMain_peUsers"; $("#" + getSubControlID("currentPeopleEditorID", g_EntityEditorUpLevelId) + "").

使用jquery/javascript判断及改变checkbox选中状态

一.使用jquery判断及改变checkbox选中状态 1.使用JQuery判断一个checkbox 是否为选中: (1).attr('checked) 看JQuery版本1.6+返回:"checked"或"undefined" ;1.5-返回:true或false (2).prop('checked') 1.6+:true/false (3).is(':checked') eg:$("input[type='checkbox']").is(':

jQuery实现点击单选按钮切换选中状态效果

实现效果:第一次点击单选按钮时选中该按钮,再次点击时取消选中该单选按钮. 关键就是要将单选按钮原来的值保存起来,第二次点击时.如果原来选中则取消,否则选中. 看代码吧,是用jQuery实现的,功能虽小.知识点不少啊..... Js代码   $(document).ready(function(){ var old = null; //用来保存原来的对象 $("input[name='sex']").each(function(){//循环绑定事件 if(this.checked){ o

jquery获取单选button选中的值

在页面上单选button的代码: <s:iterator value="@[email protected]"> <input type="radio" <s:if test="key eq record.is_com">checked</s:if> value="${key}" name="record.is_com"/>${value}    </s

jQuery中checkbo添加事件,判断是否选中和设置选中与取消选中

判断是否选中 $('#checkbox').prop('checked') 设置选中与不选中状态 $('#checkbox').attr('checked',true) $('#checkbox').attr('checked',false) 添加事件 html <div class="checkbox"> <label><input type="checkbox" class="pull-right"><