HTML之判断checkbox复选框是否被选中

简介: HTML之判断checkbox复选框是否被选中

1、html代码,注意需要引用jquery-1.12.4.min.js。


<!DOCTYPE html>
<html lang="en">
<head>
    <title>CheckBox</title>
    <script src="jquery-1.12.4.min.js"></script>
</head>
<body>
    <form action="">
        <b>你最喜欢谁?</b> &nbsp;<br /><br />
        <label for="xngz"><input type="checkbox" id="xngz">xngz</label>
        <label for="wngb"><input type="checkbox" id="wngb">wngb</label>
        <br /><br />
        <button id="sure">想好了</button> <br />
    </form>
    <script>
        var $xngz = $("#xngz");         //获取JQuery对象
        var xngz = $xngz[0];            //DOM对象 或者 $cr.get(0)
        var $wngb = $("#wngb");         //获取JQuery对象
        var wngb = $wngb[0];            //DOM对象 或者 $cr.get(0)
        $("#sure").click(function(){
            //第一种方法:
            if(xngz.checked & wngb.checked){
                alert("哈哈哈,原来你喜欢bjyx!");
            }
            //第二种方法
            else if($xngz.is(":checked")){
                alert("xngz:既然你不喜欢wngb,那我也不喜欢你了!!");
            }
            //第三种方法:
            else if($xngz.prop("checked")){
                alert("wngb:你凭什么不喜欢xngz!");
            }
            else{
                alert("这么没爱的吗!");
            }
        })
    </script>
</body>
</html>


2、运行如下:

q1.png


相关文章
|
数据安全/隐私保护
零基础HTML入门教程(17)——表单的单选框和复选框
我们上一小结学习了,密码输入框和文本输入框,我们这一小结学习复选框和单选框。单选框用于从若干选项中选择其中一个,例如性别只能从男、女中选择一个: 效果如下 代码如下 效果如下 我们这一小节学习了单选框和复选框,我相信在大家,注册账号或者填写信息的时候很常见,在我们html里面单选框和复选框也很常用,我们要熟练使用。
零基础HTML入门教程(17)——表单的单选框和复选框
html+css实战34-单选功能和默认选中
html+css实战34-单选功能和默认选中
121 0
html+css实战34-单选功能和默认选中
|
JavaScript 前端开发
js:获取当前鼠标选中的文本/html
js:获取当前鼠标选中的文本/html
453 0
html去除input边框以及选中时边框 默认样式
html去除input边框以及选中时边框 默认样式
1214 0
|
开发工具
html去除input边框以及选中时边框 默认样式
html去除input边框以及选中时边框 默认样式
303 0
|
JavaScript 前端开发
html复选框的全选和全不选
js版: function checkAll(){ //1.
1715 0