使用js操作checkbox

简介: 我们在项目中经常会遇到这个问题:使用js判断checkbox框是否被选中以及使用js对checkbox进行操作。其实这些需求很简单,这里给出使用原生js和jQuery来完成这些需求。

我们在项目中经常会遇到这个问题:使用js判断checkbox框是否被选中以及使用js对checkbox进行操作。
其实这些需求很简单,这里给出使用原生jsjQuery来完成这些需求。

一.使用原生JavaScript判断是否选中checkbox框

<input type="checkbox" id="test" class="test">同意
<script>
    // 获取checkbox元素
    var box=document.getElementById("test");      
    // 判断是否被拒选中,选中返回true,未选中返回false
    alert(box.checked);
</script>

二.使用原生JavaScript判断是否选中checkbox框

<input type="checkbox" id="test" class="test">同意
<script>
    // 获取checkbox元素
    var box=document.getElementById("test");      
    // 判断是否被拒选中,选中返回true,未选中返回false
    alert(box.checked);
</script>

三.使用原生Javascript移除选中的checkbox框

<input type="checkbox" id="test" class="test">同意
<script>
    // 获取checkbox元素
    var box=document.getElementById("test");      
    // 判断是否被拒选中,选中返回true,未选中返回false
    box.checked=false;
</script>

四.使用jQuery判断是否选中checkbox框

<input type="checkbox" id="test" class="test">同意
<script>
    // 选中返回true,未选中返回false
    $('#test').is(":checked");

    // 选中返回true,未选中返回false;一定要注意,这里不可以使用attr("checked")来判断
    $("#test").prop("checked")
</script>

五.使用jQuery设置选中checkbox框

<input type="checkbox" id="test" class="test">同意
<script>
     $("#test").prop("checked","trure")
     $("#test").attr("checked","true")
</script>

六.使用jQuery设置移除选中的checkbox框

<input type="checkbox" id="test" class="test">同意
<script>
     $("#test").prop("checked","false")
     $("#test").attr("checked","false")
</script>
相关文章
|
11天前
|
缓存 JavaScript 前端开发
【JavaScript 技术专栏】DOM 操作全攻略:从基础到进阶
【4月更文挑战第30天】本文深入讲解JavaScript与DOM交互,涵盖DOM基础、获取/修改元素、创建/删除元素、事件处理结合及性能优化。通过学习,开发者能掌握动态改变网页内容、结构和样式的技能,实现更丰富的交互体验。文中还讨论了DOM操作在实际案例、与其他前端技术结合的应用,助你提升前端开发能力。
|
1月前
|
JavaScript 前端开发
低效的DOM操作(js的问题)
低效的DOM操作(js的问题)
|
5天前
|
JavaScript 前端开发
javascript操作BOM的方法
javascript操作BOM的方法
13 0
|
1天前
|
JavaScript 前端开发 UED
在 JavaScript 中,异步编程和回调函数是处理非阻塞操作(如网络请求、文件读写等)的重要工具
【5月更文挑战第10天】JavaScript中的异步编程和回调函数用于处理非阻塞操作,提高应用响应性和吞吐量。异步编程通过回调函数、Promises和async/await等方式实现,避免程序因等待操作完成而阻塞。回调函数是异步操作完成后调用的函数,常用于处理网络请求等。然而,回调函数存在嵌套问题和错误处理困难,因此出现了Promises和async/await等更优解决方案。
10 3
|
2天前
|
Web App开发 JavaScript 前端开发
javascript操作DIV总结 转
javascript操作DIV总结 转
|
5天前
|
JavaScript 前端开发 安全
javascript操作DOM的方法
javascript操作DOM的方法
11 0
|
5天前
|
JavaScript 前端开发 容器
js操作dom元素
js操作dom元素
13 0
|
5天前
|
JavaScript 前端开发 索引
js操作字符串的方法
js操作字符串的方法
13 2
|
12天前
|
存储 缓存 JavaScript
【Web 前端】JS哪些操作会造成内存泄露?
【4月更文挑战第22天】【Web 前端】JS哪些操作会造成内存泄露?
|
15天前
|
JavaScript 前端开发
js操作字符串的相关方法
js操作字符串的相关方法
12 3