原生js操作checkbox用document.getElementById实现_javascript技巧

jquery与checkbox的checked属性的问题,讲的是控件<input type="checkbox"></input>

1、页面加载成功后,点击选中或取消选中该checkbox,checkbox属性里的checked属性不会根据该checkbox是否选中而变化

2、checkbox里的onchange或onclick方法里用jquery的attr方法获取checked是看得到的checked属性的值与它是否给钩上没有关系

3、使用document.getElementById("checkbox_id").checked获取的值与是否钩上一至,即与所见即所得

4、使用$("#checkbox_id").attr("checked")获取的值与<input type="checkbox"></input>里的checked情况一至,不是所见即所得

5、使用$("#checkbox:checked")获取的都是被钩上的checkbox

6、document.getElementById("checkbox_id").checked=true,控件里的checked属性没有显示出来,所做即所见

7、$("#checkbox_id").attr("checked",true),控件里的checked属性显示出来,所做即所见,同时代码也会变化

js操作checkbox本人建议用document.getElementById("checkbox_id").checked,jquery操作checkbox真不爽

时间: 2024-08-06 23:54:20

原生js操作checkbox用document.getElementById实现_javascript技巧的相关文章

原生js模拟淘宝购物车项目实战_javascript技巧

本文实例讲述了原生js模拟淘宝购物车实现代码.分享给大家供大家参考.具体如下: 通过JavaScript实现类似与淘宝的购物车效果,包括商品的单选.全选.删除.修改数量.价格计算.数目计算.预览等功能的实现.实现的效果图: 相应的代码: shoppingCart.html <!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <title>JavaScript实现购物车项

原生JS简单实现ajax的方法示例_javascript技巧

本文实例讲述了原生JS简单实现ajax的方法.分享给大家供大家参考,具体如下: HTML部分: <body> <input type="button" value="Ajax提交" onclick="Ajax();" /> <div id="resText" ></div> </body> 这里有个input按钮,点击会触发click事件,click事件调用Ajax(

基于React.js实现原生js拖拽效果引发的思考_javascript技巧

一.起因&思路 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖拽效果. 首先,其实拖拽效果的思路是很简单的.主要就是三个步骤: 1.onmousedown的时候,启动可拖拽事件,记录被拖拽元素的原始坐标参数. 2.onmousemove的时候,实时记录鼠标移动的距离,结合被拖拽元素第一阶段的坐标参数,计算并设置新的坐标值. 3.onmouseup的时候,关闭可拖拽事件,记录新的坐标值. 注意:这里主要是通过绝对定位的top和left来确定元素的位置

原生JS实现美图瀑布流布局赏析_javascript技巧

自pinterest网站爆红以来,国内一度掀起"仿PIN"狂潮,诸如花瓣.蘑菇街等等.正是如此,"瀑布流"式布局受到广大网民的青睐.众多知名JS库,也相继出现"瀑布流"布局插件,譬如jQuery的Masonry插件.KISSY的waterfall插件等.今天闲来无聊,我也自己动手弄了段原生JS代码,实现了简单的"瀑布流"布局效果,当然肯定不能和以上那些优秀插件相提并论,有兴趣的朋友,可以去看看,希望能带给你或多或少的收获. 1

原生js三级联动的简单实现代码_javascript技巧

实例如下: <!DOCTYPE html> <head> <title> 三级联动 </title> <meta charset="utf-8"> </head> <body> <script> window.onload = function() { console.log(city) var oDiv = document.getElementById("div");

原生js图片轮播效果实现代码_javascript技巧

现在很多javascript的插件都可以实现图片轮播的功能,这篇文章,主要是通过这个domo来解析javascript图片轮播的原理. 老规矩,先上代码.至于代码中的图片,随便找三张即可,最核心的还是理解其思想. html: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>滚动图</title> <link rel="sty

原生JS实现匀速图片轮播动画_javascript技巧

JS实现轮播图实现结果图: 需求: 1 根据图片动态添加小圆点 2 目标移动到小圆点轮播图片 3 鼠标离开图片,定时轮播图片:鼠标在图片上时暂停 4  左右两侧可点击轮播图片     一.布局部分 html部分 <div class="w main clearfix"><!--主内容部分开始--> <div class="slider"><!--轮播图部分开始--> <ul class="imgs&qu

原生js实现网易轮播图效果_javascript技巧

一.实现效果图 二.分析布局 主盒子里分上下两个小盒子(1和2). 包含图片的盒子占两张图片的宽(3),处于上盒子中,当前图片在上盒子(1)中,其它图片在盒子(3)的右侧等待播放. 下边的盒子(2)包括了六个小方块及定位在主盒子上的两个箭头. 三.html部分   <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>wa

原生JS实现的放大镜效果实例代码_javascript技巧

这是我用原生js写的放大镜效果,与各种各样的框架技术相比,我喜欢使用原生的js,在这里,想和大家一起谈谈原生和框架技术的理解与个人喜好. <!DOCTYPE HTML> <html> <head> <title>js放大镜效果</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <style