前端开发学习之——使用jquery/javascript判断及改变checkbox选中状态

最新推荐文章于 2025-08-15 09:01:53 发布

weixin_34144450

最新推荐文章于 2025-08-15 09:01:53 发布

阅读量171

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/yanayana/p/6687704.html

本文介绍了如何使用JQuery和JavaScript来判断及改变checkbox的状态，包括判断选中状态、改变选中状态、获取value值等，并提供了具体示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、使用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(':checked');选中为true,未选中为false；

所有版本:true/false

2.改变选中状态

（1）使用attr方法进行checkbox状态的改变。

选中：$("input[type='checkbox']").attr("checked",true);

取消选中：$("input[type='checkbox']").attr("checked",false);

（2）但是有时使用attr操作，虽然属性值改变了，但是页面上的checkbox并没有选中。在这种情况下，建议使用prop方法来操作改变checkbox选中状态。

选中：　　

$("input[type='checkbox']").prop("checked",true);

$("input[type='checkbox']").prop({checked:true}); //map键值对

$("input[type='checkbox']").prop("checked",function(){return true;});//函数返回true或false

$("input[type='checkbox']").prop("checked","checked");

取消选中：

$("input[type='checkbox']").prop("checked",false);

3.获取value值

使用Jquery获取checkbox的值，在没有给value值的情况下，获取的值为"on"。

使用Jquery获取checkbox的值，给value值的情况下，获取的值是value值。

4.举例：实现反选

$(":checkbox").each(function(){
　　if($(this).prop("checked")){
　　　　$(this).prop("checked",false);
　　}else{
　　　　$(this).prop("checked",true);
　　}
});

其中：
全选： $(":checkbox").prop("checked",true)
取消全选：$(":checkbox").prop("checked",false)
获取选中的：$(":checkbox:checked")

二、使用javascript判断及改变checkbox选中状态

判断：

document.getElementById("someCheckbox").checked　　//值为true或false

改变

document.getElementById("someCheckbox").checked = true;

document.getElementById("someCheckbox").checked = false;

转载于:https://www.cnblogs.com/yanayana/p/6687704.html