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

本文介绍了如何使用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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值