自己做网站排版,合肥建站优化,2016网站设计风格,宝安网站设计一、方法介绍 第一种方法#xff1a;通过获取dom元素#xff0c;getElementById、querySelector、getElementsByName、querySelectorAll#xff08;需要遍历#xff0c;例如#xff1a;for循环#xff09; 第二种是用v-model在input复选框上绑定一个变量#xff0c;通过…一、方法介绍 第一种方法通过获取dom元素getElementById、querySelector、getElementsByName、querySelectorAll需要遍历例如for循环 第二种是用v-model在input复选框上绑定一个变量通过双向绑定的特性来判断复选框是否被选中。推荐使用 二、演示
第一种被选中输出true否则为false
document.getElementById()
html
input typecheckbox idmyCheckbox
js
let checkbox document.getElementById(myCheckbox);
console.log(checkbox.checked); // 输出 true 或 false
document.querySelector()
html:
input typecheckbox classmyCheckboxjs:
let checkbox document.querySelector(.myCheckbox);
console.log(checkbox.checked); // 输出 true 或 false
document.getElementsByName() 可以获取多个多个用for循环
html
input typecheckbox namemyCheckbox
input typecheckbox namemyCheckbox
js
let checkboxes document.getElementsByName(myCheckbox);
for (let i 0; i checkboxes.length; i) {console.log(checkboxes[i].checked); // 输出 true 或 false
}querySelectorAll()
html:
input typecheckbox
input typecheckbox
js:
let checkboxes document.querySelectorAll(input[typecheckbox]);
for (let i 0; i checkboxes.length; i) {console.log(checkboxes[i].checked); // 输出 true 或 false
}第二种
html
input typecheckbox classapply-checkbox v-modelcheckboxIsCheckedjs在data中声明变量checkboxIsChecked:false 未选中
data(){return{checkboxIsChecked:false,}
}在你做任何其他操作的时候判断checkboxIsChecked的值如果为true表明选中了再进行后续操作。比如点击事件checkClick()中输出checkboxIsChecked的值 checkClick(){console.log(this.checkboxIsChecked);}
选中输出true、未选中输出false。
checkboxIsChecked的值会随着复选框的选中与否实时改变。
