jq判断checkbox是否选中

2025-11-10 13:15:52

1、打开html开发工具,新建一个html页面。

jq判断checkbox是否选中

2、在html代码页面创建一个checkbox选中框,然后给这个checkbox选择框添加一个id(remember),用于后面对checkbox选中框进行判断。

html代码:

<input type="checkbox" id="remember"/>

jq判断checkbox是否选中

3、引入jquery库。 判断checkbox需要使用的jquery封装好的方法,所以需要引入jquery库。

jq判断checkbox是否选中

4、创建<scritp>标签,在<script>编辑判断checkbox选中框是否勾选的方法。

javascript代码:

<script type="text/javascript">

$(function(){

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

var flage = $(this).is(":checked");

if(flage){

alert("checkbox选中");

}else{

alert("checkbox未选中");

}

})

})

</script>

jq判断checkbox是否选中

5、保存html代码,然后使用浏览器打开,勾选checkbox选中框,即可看到弹出checkbox勾选的提示,再次点击就会弹出checkbox未选中提示。

jq判断checkbox是否选中

jq判断checkbox是否选中

1、使用$(this).attr('checked')判断checkbox选中框是否勾选,步骤与方法一一致,只需要把方法一的第四个步骤里这行 var flage = $(this).is(":checked") 修改为var flage = $(this).attr('checked')即可。

jq判断checkbox是否选中

2、保存html代码,然后使用浏览器打开,勾选checkbox选中框,即可看到弹出checkbox勾选的提示,再次点击就会弹出checkbox未选中提示。

jq判断checkbox是否选中

jq判断checkbox是否选中

3、页面所有代码。可以直接复制下面所有代码,粘贴到新建html页面,修改引入jquery路径,然后保存html代码使用浏览器打开即可看到效果。

所有代码:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

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

</script>

<script type="text/javascript">

$(function(){

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

//var flage = $(this).is(":checked");

var flage = $(this).attr('checked')

if(flage){

alert("checkbox选中");

}else{

alert("checkbox未选中");

}

})

})

</script>

</head>

<body>

<input type="checkbox" id="remember"/>

</body>

</html>

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢