告诉你，DOM就是个无敌工具！只用JavaScript就可以随意操控网页，无论是换布局还是换内容都so easy！特别是修改单选框里的选项，那简直小菜一碟！
DOM是啥玩意儿
明白了！DOM就是网页的编辑器，方便修改网站内容，跟在电脑上轻松换字和换图没什么两样。想调大或缩小字号、换张图片？完全没问题，随心所欲，像是在纸头上随便乱画一样好玩儿！
单选框简介
明白啦?就在 HTML 的表格中选一个选项嘛,有点像我们去买包零食时只能选一种味道差不多咯~
使用checked属性
搞定单选框的DOM操作超好懂喔！方法有俩，第一种，瞅瞅它的”checked“属性，比开灯还容易。比如，要让哪个单选框组里的东西选中，直接给那项加个”checked“就搞定，立马变成理想效果！
你知道吗，刚才咱们这儿的那事儿，就是把’checked’属性加给那个框，结果它立马就被选上了，一点儿都不费劲儿！就是那么的轻松愉快！
JavaScript操作checked属性
想让你网站上的单选按钮里勾了对号的选项闪闪发光吗？很简单，加几行JS代码就搞定~
// 获取单选框元素
var appleRadio = document.querySelector('input[value="apple"]');
// 检查单选框是否处于选中状态
console.log(appleRadio.checked); // true
// 设置单选框为选中状态
appleRadio.checked = true;
// 取消单选框的选中状态
appleRadio.checked = false;
javascript搞定！找到那个带“苹果”图标的文本框，没错，那就是我们要找的那个复选框。
checkBox.checked = true;
这段代码帮你轻松搞定有“苹果”选项的单选按钮，还不忘添个勾号。不过，要是你选了“否”（也就是false），那勾儿可就要消失。
使用setAttribute方法
说到checkboxes，你是不是只会用这招？告诉你个秘密，我们还可以用setAttribute来处理单选框的选项！赶快看看了解下具体步骤呗！
页里找下名叫”苹果”的框儿，给它画上勾选的小三角就对了~
// 获取单选框元素
var appleRadio = document.querySelector('input[value="apple"]');
// 使用setAttribute方法设置单选框为选中状态
appleRadio.setAttribute("checked", "checked");
这段代码在找叫做”苹果”的单选框,并把它勾上了哦.
别忘了给单选框打个tag~ HTML里找找就能看懂了，不过得记住跟checked属性搭伙的话，HTML可搞不懂你动了哪儿！
推荐使用checked属性
在单选框里添点选项行不行呀？要么在选中项后面加个 selected=”selected”属性，要不你也可以试试 useAttribute (设置属性)这个招数。这两种办法都是可行滴！不过，我觉得直接用checked属性会更好使效果也挺赞滴！
评论0