要使用JavaScript通过类型而不是名称来操作HTML输入(复选框)元素,可以使用以下方法:
(图片来源网络,侵删)1、获取所有复选框元素。
2、遍历这些元素,检查它们的type
属性是否为checkbox
。
3、如果type
属性为checkbox
,则根据需要执行相应的操作。
以下是一个示例代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF8"> <meta name="viewport" content="width=devicewidth, initialscale=1.0"> <title>Document</title> </head> <body> <table border="1"> <tr> <th>类型</th> <th>名称</th> <th>操作</th> </tr> <tr> <td>checkbox</td> <td><input type="checkbox" name="checkbox1"></td> <td><button onclick="checkAllCheckboxes()">全选</button></td> </tr> <tr> <td>checkbox</td> <td><input type="checkbox" name="checkbox2"></td> <td><button onclick="uncheckAllCheckboxes()">取消全选</button></td> </tr> <tr> <td>checkbox</td> <td><input type="checkbox" name="checkbox3"></td> <td><button onclick="toggleCheckbox()">切换选中状态</button></td> </tr> </table> <script> function checkAllCheckboxes() { var checkboxes = document.getElementsByTagName('input'); for (var i = 0; i < checkboxes.length; i++) { if (checkboxes[i].type === 'checkbox') { checkboxes[i].checked = true; } } } function uncheckAllCheckboxes() { var checkboxes = document.getElementsByTagName('input'); for (var i = 0; i < checkboxes.length; i++) { if (checkboxes[i].type === 'checkbox') { checkboxes[i].checked = false; } } } function toggleCheckbox() { var checkboxes = document.getElementsByTagName('input'); for (var i = 0; i < checkboxes.length; i++) { if (checkboxes[i].type === 'checkbox') { checkboxes[i].checked = !checkboxes[i].checked; } } } </script> </body> </html>
在这个示例中,我们创建了一个包含三个复选框的表格,每个复选框旁边都有一个按钮,用于执行相应的操作(全选、取消全选或切换选中状态),当用户点击这些按钮时,将调用相应的JavaScript函数来操作复选框。
最新评论
本站CDN与莫名CDN同款、亚太CDN、速度还不错,值得推荐。
感谢推荐我们公司产品、有什么活动会第一时间公布!
我在用这类站群服务器、还可以. 用很多年了。