jQuery
jQuery 提供了 attr() 和 prop() 方法来完成任务。
选择取决于 jQuery 版本。
让我们看看每个例子。
要选中和取消选中复选框,我们可以使用下面描述的 JavaScript 或者 jQuery 方法。
属性Attributes 与属性Properties的区别
对于 jQuery 1.6 版本,prop() 方法提供了一种检索property值的方法,而 attr() 方法检索 attributes。
checked 是一个布尔attribute属性,这意味着如果该attribute存在,则相应的property为真,即使该attribute没有值或者attribute设置为空字符串值或者“假”, property 都为真。
请务必记住,checked attribute属性与checked 属性不对应。
选中的attribute属性值不会随着复选框的状态而改变,而选中的属性会改变。
prop()
我们可以使用 prop() 方法选中或者取消选中复选框,例如单击按钮。
该方法需要 jQuery 1.6+。
<!DOCTYPE html> <html> <head> <title>文档的标题</title> <script src="https://code.jquery.com/jquery-3.5.0.min.js"></script> </head> <body> <p><input type="checkbox" id="checkId"> Are you sure?</p> <button type="button" class="check">Yes</button> <button type="button" class="uncheck">No</button> <script> $(document).ready(function() { $(".check").click(function() { $("#checkId").prop("checked", true); }); $(".uncheck").click(function() { $("#checkId").prop("checked", false); }); }); </script> </body> </html>
attr()
jQuery attr() 方法可用于选中和取消选中 jQuery 1.5 以下版本的复选框:
<!DOCTYPE html> <html> <head> <title>文档的标题</title> <script src="https://code.jquery.com/jquery-3.5.0.min.js"></script> </head> <body> <p><input type="checkbox" id="checkId"> Are you sure?</p> <button type="button" class="check">Yes</button> <button type="button" class="uncheck">No</button> <script> $(document).ready(function() { $(".check").click(function() { $("#checkId").attr("checked", true); }); $(".uncheck").click(function() { $("#checkId").attr("checked", false); }); }); </script> </body> </html>
JavaScript
使用以下代码使用 JavaScript 选中和取消选中复选框:
<!DOCTYPE html> <html> <head> <title>文档的标题</title> </head> <body> <form> <p><input type="checkbox" id="checkId"> 请确认?</p> <button type="button" class="check" onclick="check()">Yes</button> <button type="button" class="uncheck" onclick="uncheck()">No</button> </form> <script> //create check function function check() { let inputs = document.getElementById('checkId'); inputs.checked = true; } //create uncheck function function uncheck() { let inputs = document.getElementById('checkId'); inputs.checked = false; } window.onload = function() { window.addEventListener('load', check, false); } </script> </body> </html>
日期:2020-06-02 22:16:09 来源:oir作者:oir