作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我在选中所有复选框时遇到问题,一旦选中,按钮就应该被禁用。我是 JavaScript 的新手,我真的很难理解如何解决这个问题。任何知道如何解决这个问题的人都会对我的项目有很大帮助。
顺便说一句,这是我的代码:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('.chk1').change(function () {
if ($(this).is(":checked")) {
$('#btnClick').removeAttr('disabled');
}
else {
var isChecked = false;
$('.chk1').each(function () {
if ($(this).is(":checked")) {
$('#btnClick').removeAttr('disabled');
isChecked = true;
}
});
if (!isChecked) {
$('#btnClick').attr('disabled', 'disabled');
}
}
})
});
</script>
<script type="text/javascript">
function checkALL(){
var chk_arr = document.getElementsByName("draw[]");
for(k=0;k< chk_arr.length;k++)
{
chk_arr[k].checked = true;
}
CheckIfChecked();
}
function unCheckALL(){
var chk_arr = document.getElementsByName("draw[]");
for(k=0;k< chk_arr.length;k++)
{
chk_arr[k].checked = false;
}
CheckIfChecked();
}
</script>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0">
<a href="javascript:selectToggle(true, 'drawing');" id="show" onclick="checkALL();">All</a> | <a href="javascript:selectToggle(false, 'drawing');" id="hide" onclick="unCheckALL();">None</a>
<tr>
<td>
<input type="checkbox" id="required-checkbox1" id="required-checkbox1" class="chk1" onClick="CheckIfChecked(this.id)" onClick="CheckIfChecked(this.id)" name="name" />
One
</td>
<td>
<input type="checkbox" id="required-checkbox1" class="chk1" onClick="CheckIfChecked(this.id)" name="name" />
Two
</td>
<td>
<input type="checkbox" id="required-checkbox1" class="chk1" onClick="CheckIfChecked(this.id)" name="name" />
Three
</td>
<td>
<input type="checkbox" id="required-checkbox1" class="chk1" onClick="CheckIfChecked(this.id)" name="name" />
Four
</td>
</tr>
<button id="btnClick" disabled="disabled">
Click me !!!</button>
</table>
</body>
</html>
在我的代码中,当我选中一个或多个复选框时,按钮会启用,而当没有选中复选框时,按钮会被禁用。现在我的问题是,当我点击All 链接时,它应该选中所有复选框并启用按钮,当我点击None 时,它应该取消选中复选框并禁用按钮.
最佳答案
要选中所有复选框和取消选中复选框,请使用 JQuery。为所有复选框赋予相同的类,例如“chk1”,然后调用
$( ".chk1" ).prop ('checked', true);
然后您可以迭代类的所有元素并检查它们是否都被选中
$( ".chk1" ).each(function() {
if ($(this).is(':checked'))
// do something
})
关于javascript - 选中所有复选框并启用按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32552262/
我是一名优秀的程序员,十分优秀!