关于jQuery 判断checkbox是否被选中的问题

自己设计的一个注册页面，如下图所示
关于jQuery 判断checkbox是否被选中的问题

现在想实现的功能是：当点击 “注册” 按钮之后，若发现没有勾选 “我已阅读并接受用户协议” 则在注册按钮之后提示：您还未同意用户协议。就跟百度的注册页面差不多，如下：
关于jQuery 判断checkbox是否被选中的问题

下面这是我的代码，但是没法实现这个功能，请各位大神指点：

$("#sbumit").click(function(){

        	 if($("#agree").attr("checked")==true){

        		 $("#msg02").hide();//隐藏提示性语言

                 $("#submit").removeAttr("disabled");//如果同意协议，删除disabled属性 ，使按钮可以被按下       		 

        	 }else{

        		 $("#msg02").show().insertAfter("#submit");//让提示性语言在“注册”栏之后显示

        	     $("#submit").attr('disabled',"true");//如果不同意协议，设置submit属性disabled，使按钮不能被按下

        	 }          

         });

<s:form>

   <s:checkbox name="agree" label="我已阅读并接受用户协议" id="agree"/>

   <s:submit  value="注册" id="submit"/>

   <font color='red' style="display:none;" id="msg02">您还未接受用户协议！</font>

   </s:form>

14 个解决方案

#1

矛盾的需求，要点了注册之后又要判断状态让注册这个按钮不能按，按都按完了你再禁止掉有什么用，你是在逗我吗?

你为什么不在点checkbox的时候去做这样的事？

#2

alert(!!$('#agree:checked').length);

#3

一句话是不是在注册的时候必须点击那个checkbox阅读接收协议啊？是这个需求吧？

#4

引用 1 楼 functionsub 的回复:

矛盾的需求，要点了注册之后又要判断状态让注册这个按钮不能按，按都按完了你再禁止掉有什么用，你是在逗我吗?

你为什么不在点checkbox的时候去做这样的事？

您说的对，我这么想确实欠妥当。那么如何在点checkbox的时候去完成效果了？就是说：如果勾选了同意协议，则按钮可以被按下，如果没有勾选同意协议，则按钮无法被按下。

#5

引用 3 楼 u010036886 的回复:

一句话是不是在注册的时候必须点击那个checkbox阅读接收协议啊？是这个需求吧？

说白了我现在就是不太清楚如何判断checkbox是否被选中，如果没有选中，还是可以点击注册按钮的，只不过点击完注册按钮之后会在 “注册” 按钮之后提示：您还未同意用户协议

#6

引用 2 楼 slwsss 的回复:

alert(!!$('#agree:checked').length);

您这是判断什么的？

#7

引用 6 楼 tzp118 的回复:

Quote: 引用 2 楼 slwsss 的回复:

alert(!!$('#agree:checked').length);

您这是判断什么的？

判断是否选中
在点击注册的时候判断是否选中，没选中就显示提示信息阻止提交否则提交

#8

$("#agree").click(function(){

             if($(this).attr("checked")==true){

                 $("#msg02").hide();//隐藏提示性语言

                 $("#submit").removeAttr("disabled");//如果同意协议，删除disabled属性 ，使按钮可以被按下                

             }else{

                 $("#msg02").show().insertAfter("#submit");//让提示性语言在“注册”栏之后显示

                 $("#submit").attr('disabled',"true");//如果不同意协议，设置submit属性disabled，使按钮不能被按下

             }          

         });

$("#submit").click(function(){

    if(!$('#agree').attr("checked")){

        alert('请先同意协议');

        return false;//阻止按钮默认事件

    }

})

另外，刚进页面的时候就要把注册按钮禁用掉。

#9

引用 7 楼 slwsss 的回复:

Quote: 引用 6 楼 tzp118 的回复:

Quote: 引用 2 楼 slwsss 的回复:

alert(!!$('#agree:checked').length);

您这是判断什么的？

判断是否选中
在点击注册的时候判断是否选中，没选中就显示提示信息阻止提交否则提交

您这个我试了，好像不行啊

$("#sbumit").click(function(){

        	 alert(!!$('#agree:checked').length);

        	 });

<s:form>

   <s:checkbox name="agree" label="我已阅读并接受用户协议" id="agree"/>

   <s:submit  value="注册" id="submit"/>

   <font color='red' style="display:none;" id="msg02">您还未接受用户协议！</font>

   </s:form>

#10

$(this).prop("checked")==true

#11

您成功了吗?

#12

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

    <title>无标题页</title>

    <script src="jquery-1.7.2.min.js" type="text/javascript"></script> 

    <style type="text/css">

        .disabled { color:Gray; }

        .enabled { color:Blue; }

    </style>

    <script type="text/javascript">

        $(function(){

            //复选框点击事件

            $("#chkAccept").click(function(){

                setStatus(false);

            });

            

            $("#btnReg").click(function(){

                setStatus(true);

            });

            //注册按钮点击事件

            function setStatus(isBtn){

                var isAccept = $("#chkAccept").is(":checked");

                $("#btnReg").attr("class", isAccept?"enabled":"disabled");

                $("#spanErrMsg").toggle(!isAccept);

                

                if(isAccept && isBtn){

                    reg();

                }

            }

            

            function reg(){

                alert("已接受协议，开始注册！");

                

                //todo

            }

        });

    </script>

</head>

<body>

    <table style="width: 100%;">

        <tr>

            <td>用户名：</td><td><input id="txtUserName" name="UserName" type="text" /></td>

        </tr>

        <tr>

            <td>密码：</td><td><input id="txtPwd" name="Pwd" type="text" /></td>

        </tr>

        <tr>

            <td>确认密码：</td><td><input id="txtConfirmPwd" name="ConfirmPwd" type="text" /></td>

        </tr>

        <tr>

            <td colspan="2" >

                <input id="chkAccept" name="Accept" type="checkbox" />

                <label for="chkAccept">我已阅读并接受用户协议</label>

            </td>

        </tr>

        <tr>

            <td colspan="2" >

                <input id="btnReg" type="button" value="注册" class="disabled" />

                <span id="spanErrMsg" style="color:Red;">您还未接受用户协议</span>    

            </td>

        </tr>

    </table>

</body>

</html>

完整代码，　本机测试通过

#13

判断复选框是否选中
1.   $("#id").attr("checked")
在jquery 1.6前（含1.6），返回值是boolean类型的true或false；
在jquery  1.6后，返回值是"checked"或undefined。
2.   jquery 1.6后dom有变动
$("#id").prop("checked") 返回值是boolean类型的true或false；
3   $("#id")is(":checked")
返回 true 或者false  暂时没有发现版本问题

#14

还有全选和反选也遇到这问题

#1

#2

alert(!!$('#agree:checked').length);

#3

一句话是不是在注册的时候必须点击那个checkbox阅读接收协议啊？是这个需求吧？

#4

引用 1 楼 functionsub 的回复:

矛盾的需求，要点了注册之后又要判断状态让注册这个按钮不能按，按都按完了你再禁止掉有什么用，你是在逗我吗?

你为什么不在点checkbox的时候去做这样的事？

#5

引用 3 楼 u010036886 的回复:

一句话是不是在注册的时候必须点击那个checkbox阅读接收协议啊？是这个需求吧？

#6

引用 2 楼 slwsss 的回复:

alert(!!$('#agree:checked').length);

您这是判断什么的？

#7

引用 6 楼 tzp118 的回复:

Quote: 引用 2 楼 slwsss 的回复:

alert(!!$('#agree:checked').length);

您这是判断什么的？

判断是否选中
在点击注册的时候判断是否选中，没选中就显示提示信息阻止提交否则提交

#8

$("#agree").click(function(){

             if($(this).attr("checked")==true){

                 $("#msg02").hide();//隐藏提示性语言

                 $("#submit").removeAttr("disabled");//如果同意协议，删除disabled属性 ，使按钮可以被按下                

             }else{

                 $("#msg02").show().insertAfter("#submit");//让提示性语言在“注册”栏之后显示

                 $("#submit").attr('disabled',"true");//如果不同意协议，设置submit属性disabled，使按钮不能被按下

             }          

         });

$("#submit").click(function(){

    if(!$('#agree').attr("checked")){

        alert('请先同意协议');

        return false;//阻止按钮默认事件

    }

})

另外，刚进页面的时候就要把注册按钮禁用掉。

#9

引用 7 楼 slwsss 的回复:

Quote: 引用 6 楼 tzp118 的回复:

Quote: 引用 2 楼 slwsss 的回复:

alert(!!$('#agree:checked').length);

您这是判断什么的？

判断是否选中
在点击注册的时候判断是否选中，没选中就显示提示信息阻止提交否则提交

您这个我试了，好像不行啊

$("#sbumit").click(function(){

        	 alert(!!$('#agree:checked').length);

        	 });

<s:form>

   <s:checkbox name="agree" label="我已阅读并接受用户协议" id="agree"/>

   <s:submit  value="注册" id="submit"/>

   <font color='red' style="display:none;" id="msg02">您还未接受用户协议！</font>

   </s:form>

#10

$(this).prop("checked")==true

#11

您成功了吗?

#12

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

    <title>无标题页</title>

    <script src="jquery-1.7.2.min.js" type="text/javascript"></script> 

    <style type="text/css">

        .disabled { color:Gray; }

        .enabled { color:Blue; }

    </style>

    <script type="text/javascript">

        $(function(){

            //复选框点击事件

            $("#chkAccept").click(function(){

                setStatus(false);

            });

            

            $("#btnReg").click(function(){

                setStatus(true);

            });

            //注册按钮点击事件

            function setStatus(isBtn){

                var isAccept = $("#chkAccept").is(":checked");

                $("#btnReg").attr("class", isAccept?"enabled":"disabled");

                $("#spanErrMsg").toggle(!isAccept);

                

                if(isAccept && isBtn){

                    reg();

                }

            }

            

            function reg(){

                alert("已接受协议，开始注册！");

                

                //todo

            }

        });

    </script>

</head>

<body>

    <table style="width: 100%;">

        <tr>

            <td>用户名：</td><td><input id="txtUserName" name="UserName" type="text" /></td>

        </tr>

        <tr>

            <td>密码：</td><td><input id="txtPwd" name="Pwd" type="text" /></td>

        </tr>

        <tr>

            <td>确认密码：</td><td><input id="txtConfirmPwd" name="ConfirmPwd" type="text" /></td>

        </tr>

        <tr>

            <td colspan="2" >

                <input id="chkAccept" name="Accept" type="checkbox" />

                <label for="chkAccept">我已阅读并接受用户协议</label>

            </td>

        </tr>

        <tr>

            <td colspan="2" >

                <input id="btnReg" type="button" value="注册" class="disabled" />

                <span id="spanErrMsg" style="color:Red;">您还未接受用户协议</span>    

            </td>

        </tr>

    </table>

</body>

</html>

完整代码，　本机测试通过

#13

#14

还有全选和反选也遇到这问题

秒客网

关于jQuery 判断checkbox是否被选中的问题

14 个解决方案

#1

#2

#3

#4

#5

#6

#7

#8

#9

#10

#11

#12

#13

#14

#1

#2

#3

#4

#5

#6

#7

#8

#9

#10

#11

#12

#13

#14

相关文章