jQuery 实现选中和取消选中checkbox(复选框)的2种方法(attr(),prop())

html代码:

<input type='checkbox' id='checkbox1' />

1 attr()

1.1 选中复选框

$("#checkbox1").attr("checked","checked");
$("#checkbox1").attr("checked",true);
$("input[type=checkbox]").attr("checked","checked");

1.2 取消选中复选框

$("#checkbox1").removeAttr("checked");
$("#checkbox1").attr("checked",false);
$("input[type=checkbox]").removeAttr("checked");

2 prop()

2.1 选中复选框

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

2.2 取消选中复选框

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

注:

(1)attr()方法只能选中一次,而prop()方法无次数限制。

(2)attr()是jQuery 1.0版本就有的函数,prop()是jQuery 1.6版本新增的函数。

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在 el-tree 中,要实现点击节点选中取消选中的功能,你可以按照以下步骤进行操作: 1. 首先,为每个节点添加一个额外的属性来记录其选中状态。你可以在数据源中为每个节点对象添加一个名为 `checked` 的属性,并将其初始值设置为 `false`。 2. 在 el-tree 的 `node-click` 事件中,切换节点的选中状态。你可以通过监听 `node-click` 事件来获取点击的节点对象,并在事件处理程序中切换 `checked` 属性的值。例如,你可以使用以下代码: ```html <el-tree :data="treeData" @node-click="handleNodeClick"></el-tree> ``` ```javascript methods: { handleNodeClick(data) { data.checked = !data.checked; } } ``` 3. 在 el-tree 的节点模板中,根据节点的选中状态来设置相应的样式。你可以使用 `:class` 绑定动态类名,根据节点的 `checked` 属性来判断是否添加一个表示选中状态的类名。例如,你可以使用以下代码: ```html <el-tree :data="treeData" :props="{ 'class': 'custom-node' }" @node-click="handleNodeClick"> <template v-slot="{ node }"> <span :class="{'custom-node-selected': node.checked}">{{ node.label }}</span> </template> </el-tree> ``` ```css .custom-node-selected { background-color: #e0f0ff; } ``` 通过以上步骤,你就可以实现 el-tree 中点击节点选中取消选中的功能了。每当你点击一个节点时,它的 `checked` 属性将会切换,并且节点的样式也会相应地改变。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值