[英]jQuery checkbox select all not working on Chrome
The below code works on JSFIDDLE but I could not get it work on Chrome for some reason.下面的代码适用于 JSFIDDLE,但由于某种原因我无法在 Chrome 上使用它。 I modified the code on jsfiddle http://jsfiddle.net/Alfie/V5SSM/2/
我修改了 jsfiddle http://jsfiddle.net/Alfie/V5SSM/2/上的代码
to the code below.到下面的代码。 It runs on Jsfiddle but not on the browser.
它在 Jsfiddle 上运行,但不在浏览器上运行。 Any help is appreciated.
任何帮助表示赞赏。 There is something which I am missing which might be like I have to convert jquery code to html compatible format in order for the code to work.
我缺少一些东西,可能是我必须将 jquery 代码转换为 html 兼容格式才能使代码正常工作。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>New User Tasks</title>
<script>
$(document).ready(function(){
$('#selectAllButton').on('click', function () {
$('input[type="checkbox"]').prop('checked', true).closest('label').addClass('c_on');
});
$('#selectNoneButton').on('click', function () {
$('input[type="checkbox"]').prop('checked', false).closest('label').removeClass('c_on');
});
$('.section .section_label input').click(function () {
var chckClass = "";
if (!this.checked) {
chckClass = "";
} else {
chckClass = "c_on"
}
$(this).closest('.section').find('input[type="checkbox"]').not(this).prop('checked', this.checked).closest('label').removeClass("c_on").addClass(chckClass);
});
$('input[type="checkbox"]').on('click', function () {
var chckClass = "";
if (!this.checked) {
chckClass = "";
} else {
chckClass = "c_on"
}
$(this).closest('label').removeClass('c_on').addClass(chckClass);
});
});
</script>
</head>
<body>
<div id="docbuilder" class="db form">
<div class="document">
<div class="section inline">
<label class="label_radio lightblue" id="selectAllButton" for="selectAll">
<input type="radio" name="masscheck" id="selectAll" />Select all</label>
</div>
<div class="section inline">
<label class="label_radio lightblue" id="selectNoneButton" for="selectNone">
<input type="radio" name="masscheck" id="selectNone" />Select none</label>
</div>
<div class="clear"></div>
</div>
<div class="document">
<div class="section">
<label class="label_check section_label blue" for="docs_1131">
<input type="checkbox" id="docs_1131" name="docs" value="1131" />Title page</label>
</div>
</div>
<div class="document">
<div class="section">
<label class="label_check section_label blue" for="docs_1118">
<input type="checkbox" id="docs_1118" name="docs" />Section 1</label>
<blockquote>
<div class="subsection">
<label class="label_check sub_label lightblue">
<input type="checkbox" name="docs" value="1119" />Subsection 1.1</label>
</div>
<div class="subsection">
<label class="label_check sub_label lightblue" for="docs_1120">
<input type="checkbox" id="docs_1120" name="docs" value="1120" />Subsection 1.2</label>
</div>
<div class="subsection">
<label class="label_check sub_label lightblue" for="docs_1121">
<input type="checkbox" id="docs_1121" name="docs" value="1121" />Subsection 1.3</label>
</div>
<div class="subsection">
<label class="label_check sub_label lightblue" for="docs_1122">
<input type="checkbox" id="docs_1122" name="docs" value="1122" />Subsection 1.4</label>
</div>
</blockquote>
</div>
</div>
<div class="document">
<div class="section">
<label class="label_check section_label blue" for="docs_1123">
<input type="checkbox" id="docs_1123" name="docs" />Section 2</label>
<table>
<tr><div class="subsection">
<label class="label_check sub_label lightblue" for="docs_1124">
<input type="checkbox" id="docs_1124" name="docs" value="1124" />Subsection 2.1</label>
</div></tr>
<tr><div class="subsection">
<label class="label_check sub_label lightblue" for="docs_1124">
<input type="checkbox" id="docs_1124" name="docs" value="1125" />Subsection 2.2</label>
</div></tr>
<tr></tr><div class="subsection">
<label class="label_check sub_label lightblue" for="docs_1126">
<input type="checkbox" id="docs_1126" name="docs" value="1126" />Subsection 2.3</label>
</div><tr>
<tr><div class="subsection">
<label class="label_check sub_label lightblue" for="docs_1127">
<input type="checkbox" id="docs_1127" name="docs" value="1127" />Subsection 2.4</label>
</div></tr>
</table>
</div>
</div>
<button type="submit" class="icon icon-arrow-white">Submit</button>
</div>
</body>
</html>
I think you forgot to include the jQuery 1.10.1 version.我想你忘了包括 jQuery 1.10.1 版本。 I used cdn and it worked fine on my chrome latest version.
我使用了 cdn,它在我的 chrome 最新版本上运行良好。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>New User Tasks</title>
<!--NOTICE THE CDN FOR JQUERY-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.js"></script>
<script>
$(document).ready(function () {
$('#selectAllButton').on('click', function () {
$('input[type="checkbox"]').prop('checked', true).closest('label').addClass('c_on');
});
$('#selectNoneButton').on('click', function () {
$('input[type="checkbox"]').prop('checked', false).closest('label').removeClass('c_on');
});
$('.section .section_label input').click(function () {
var chckClass = "";
if (!this.checked) {
chckClass = "";
} else {
chckClass = "c_on"
}
$(this).closest('.section').find('input[type="checkbox"]').not(this).prop('checked', this.checked).closest('label').removeClass("c_on").addClass(chckClass);
});
$('input[type="checkbox"]').on('click', function () {
var chckClass = "";
if (!this.checked) {
chckClass = "";
} else {
chckClass = "c_on"
}
$(this).closest('label').removeClass('c_on').addClass(chckClass);
});
});
</script>
</head>
<body>
<div id="docbuilder" class="db form">
<div class="document">
<div class="section inline">
<label class="label_radio lightblue" id="selectAllButton" for="selectAll">
<input type="radio" name="masscheck" id="selectAll" />Select all</label>
</div>
<div class="section inline">
<label class="label_radio lightblue" id="selectNoneButton" for="selectNone">
<input type="radio" name="masscheck" id="selectNone" />Select none</label>
</div>
<div class="clear"></div>
</div>
<div class="document">
<div class="section">
<label class="label_check section_label blue" for="docs_1131">
<input type="checkbox" id="docs_1131" name="docs" value="1131" />Title page</label>
</div>
</div>
<div class="document">
<div class="section">
<label class="label_check section_label blue" for="docs_1118">
<input type="checkbox" id="docs_1118" name="docs" />Section 1</label>
<blockquote>
<div class="subsection">
<label class="label_check sub_label lightblue">
<input type="checkbox" name="docs" value="1119" />Subsection 1.1</label>
</div>
<div class="subsection">
<label class="label_check sub_label lightblue" for="docs_1120">
<input type="checkbox" id="docs_1120" name="docs" value="1120" />Subsection 1.2</label>
</div>
<div class="subsection">
<label class="label_check sub_label lightblue" for="docs_1121">
<input type="checkbox" id="docs_1121" name="docs" value="1121" />Subsection 1.3</label>
</div>
<div class="subsection">
<label class="label_check sub_label lightblue" for="docs_1122">
<input type="checkbox" id="docs_1122" name="docs" value="1122" />Subsection 1.4</label>
</div>
</blockquote>
</div>
</div>
<div class="document">
<div class="section">
<label class="label_check section_label blue" for="docs_1123">
<input type="checkbox" id="docs_1123" name="docs" />Section 2</label>
<table>
<tr><div class="subsection">
<label class="label_check sub_label lightblue" for="docs_1124">
<input type="checkbox" id="docs_1124" name="docs" value="1124" />Subsection 2.1</label>
</div></tr>
<tr><div class="subsection">
<label class="label_check sub_label lightblue" for="docs_1124">
<input type="checkbox" id="docs_1124" name="docs" value="1125" />Subsection 2.2</label>
</div></tr>
<tr></tr><div class="subsection">
<label class="label_check sub_label lightblue" for="docs_1126">
<input type="checkbox" id="docs_1126" name="docs" value="1126" />Subsection 2.3</label>
</div><tr>
<tr><div class="subsection">
<label class="label_check sub_label lightblue" for="docs_1127">
<input type="checkbox" id="docs_1127" name="docs" value="1127" />Subsection 2.4</label>
</div></tr>
</table>
</div>
</div>
<button type="submit" class="icon icon-arrow-white">Submit</button>
</div>
</body>
</html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.