如何使用 onclick 事件引用按 id 计算选中的复选框
How to count checked checkbox using onclick event ref by id?
如何使用 onclick 事件引用按 id 计算选中复选框？
http://jsfiddle.net/9na5Q/11/
Html 是
<div id="yyy">
<input type="checkbox" id="check_id" onclick="xxx()" checked>
<input type="checkbox" id="check_id" onclick="xxx()">
<input type="checkbox" id="check_id" onclick="xxx()">
<input type="checkbox" id="check_id" onclick="xxx()" checked>
<input type="checkbox" id="check_id" onclick="xxx()">
<div>
而JavaScript是
function xxx()
{
var zzz = document.getElementById("check_id").length;
alert(zzz);
}
Id 必须是唯一的。它们对于整个文档是唯一的。因此，解决方案是将其更改为类名。这只是众多解决方案之一。
<div id="yyy">
<input type="checkbox" class="checkBox" id="check_id1" onclick="checkTotalCheckedBoxes()" checked>
<input type="checkbox" class="checkBox" id="check_id2" onclick="checkTotalCheckedBoxes()">
<input type="checkbox" class="checkBox" id="check_id3" onclick="checkTotalCheckedBoxes()">
<input type="checkbox" class="checkBox" id="check_id4" onclick="checkTotalCheckedBoxes()" checked>
<input type="checkbox" class="checkBox" id="check_id5" onclick="checkTotalCheckedBoxes()">
<div>
function checkTotalCheckedBoxes()
{
var checkLength = 0;
var boxes = document.getElementById("yyy").getElementsByTagName("input");
for (var i = 0; i < boxes.length; i++)
{
boxes[i].checked ? checkLength++ : null;
}
alert (checkLength + " boxes are checked." );
}
ID 在 html 中是唯一的。请改用类。
使用jquery检查选中的复选框要容易得多，因此如果可以的话，请使用它。
function xxx()
{
var zzz = $(".check_id:checked").length;
alert(zzz);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="yyy">
<input type="checkbox" class="check_id" onclick="xxx()" checked>
<input type="checkbox" class="check_id" onclick="xxx()">
<input type="checkbox" class="check_id" onclick="xxx()">
<input type="checkbox" class="check_id" onclick="xxx()" checked>
<input type="checkbox" class="check_id" onclick="xxx()">
<div><script type="text/javascript">
$(document).ready(function () {
$('input[type="checkbox"]').on('click', function(){
var total=0;
var list =$('input[type="checkbox"]').length;
var dogsSelected = $("input[type='checkbox']:checked");
var numSelected = dogsSelected.length;
for( var i=0; i <=numSelected; i++) {
if(numSelected > 10)
{
$(".total").addClass('hide');
$(".oMute").removeClass('hide');
return false;
}
else {
$(".oMute").addClass('hide');
$(".total").removeClass('hide');
}
}
});
});
</script>
目录
<section class="oOpt jsCategory1">
<h1 class="oH4">Web, Mobile & Software Dev</h1>
<label for="ci531770282589057025" class="block oOptLbl">
<input type="checkbox" id="chk" value="Desktop Software Development" class="jsCategory1" name="chk[]" >
Desktop Software Development</label>
<label for="ci531770282589057026" class="block oOptLbl">
<input type="checkbox" id="chk" value="Ecommerce Development" name="chk[]" class="jsCategory1">Ecommerce Development</label>
<label for="ci531770282589057027" class="block oOptLbl">
<input type="checkbox" id="chk" value="Game Development" name="chk[]" class="jsCategory1">Game Development</label>
<label for="ci531770282589057024" class="block oOptLbl"
>
<input type="checkbox" id="chk" value="Mobile Development" name="chk[]" class="jsCategory1">Mobile Development</label>
<label for="ci531770282589057030" class="block oOptLbl">
<input type="checkbox" id="chk" value="Product Management" name="chk[]" class="jsCategory1">Product Management</label>
<label for="ci531770282589057031" class="block oOptLbl">
<input type="checkbox" id="chk" value="QA & Testing" name="chk[]" class="jsCategory1">QA & Testing</label>
<label for="ci531770282589057028" class="block oOptLbl">
<input type="checkbox" id="chk" value="Scripts & Utilities" name="chk[]" class="jsCategory1">Scripts & Utilities</label>
<label for="ci531770282584862733" class="block oOptLbl">
<input type="checkbox" id="chk" value="Web Development" class="jsCategory1">Web Development</label>
<label for="ci531770282589057029" class="block oOptLbl">
<input type="checkbox" id="chk" value="Web & Mobile Design" name="chk[]" class="jsCategory1">Web & Mobile Design</label>
<label for="ci531770282589057032" class="block oOptLbl">
<input type="checkbox" id="chk" value="Other - Software Development" name="chk[]" class="jsCategory1">Other - Software Development</label>
</section>
<section class="oOpt jsCategory2">
<h1 class="oH4">IT & Networking</h1>
<label for="ci531770282589057033" class="block oOptLbl">
<input type="checkbox" id="chk" value="Database Administration" name="chk[]" class="jsCategory2">Database Administration</label>
<label for="ci531770282589057034" class="block oOptLbl">
<input type="checkbox" id="chk" value="ERP / CRM Software" name="chk[]" class="jsCategory2">ERP / CRM Software</label>
<label for="ci531770282589057036" class="block oOptLbl">
<input type="checkbox" id="chk" value="Information Security" name="chk[]" class="jsCategory2">Information Security</label>
<label for="ci531770282589057035" class="block oOptLbl">
<input type="checkbox" id="chk" value="Network & System Administration" name="chk[]" class="jsCategory2">Network & System Administration</label>
<label for="ci531770282589057037" class="block oOptLbl">
<input type="checkbox" id="chk" value="Other - IT & Networking" name="chk[]" class="jsCategory2">Other - IT & Networking</label>
</section>
<section class="oOpt jsCategory3">
<h1 class="oH4">Data Science & Analytics</h1>
<label for="ci531770282593251330" class="block oOptLbl">
<input type="checkbox" id="chk" value="A/B Testing" name="chk[]" class="jsCategory3">A/B Testing</label>
<label for="ci531770282589057039" class="block oOptLbl">
<input type="checkbox" id="chk" value="Data Visualization" name="chk[]" class="jsCategory3">Data Visualization</label>
<label for="ci531770282593251331" class="block oOptLbl">
<input type="checkbox" id="chk" value="Data Extraction / ETL" name="chk[]" class="jsCategory3">Data Extraction / ETL</label>
<label for="ci531770282589057038" class="block oOptLbl">
<input type="checkbox" id="chk" value="Data Mining & Management" name="chk[]" class="jsCategory3">Data Mining & Management</label>
<label for="ci531770282593251329" class="block oOptLbl">
<input type="checkbox" id="chk" value="Machine Learning" name="chk[]" class="jsCategory3">Machine Learning</label>
<label for="ci531770282593251328" class="block oOptLbl">
<input type="checkbox" id="chk" value="Quantitative Analysis" name="chk[]" class="jsCategory3">Quantitative Analysis</label>
<label for="ci531770282593251332" class="block oOptLbl">
<input type="checkbox" id="chk" value="Other - Data Science & Analytics" name="chk[]" class="jsCategory3">Other - Data Science & Analytics</label>
</section>
<section class="oOpt jsCategory4">
<h1 class="oH4">Engineering & Architecture</h1>
<label for="ci531770282601639948" class="block oOptLbl">
<input type="checkbox" id="chk" value="3D Modeling & CAD" name="chk[]" class="jsCategory4">3D Modeling & CAD</label>
<label for="ci531770282601639949" class="block oOptLbl">
<input type="checkbox" id="chk" value="Architecture" name="chk[]" class="jsCategory4">Architecture</label>
<label for="ci531770282605834240" class="block oOptLbl">
<input type="checkbox" id="chk" value="Chemical Engineering" name="chk[]" class="jsCategory4">Chemical Engineering</label>
<label for="ci531770282601639950" class="block oOptLbl">
<input type="checkbox" id="chk" value="Civil & Structural Engineering" name="chk[]" class="jsCategory4">Civil & Structural Engineering</label>
<label for="ci531770282605834241" class="block oOptLbl">
<input type="checkbox" id="chk" value="Contract Manufacturing" name="chk[]" class="jsCategory4">Contract Manufacturing</label>
<label for="ci531770282601639951" class="block oOptLbl">
<input type="checkbox" id="chk" value="Electrical Engineering" name="chk[]" class="jsCategory4">Electrical Engineering</label>
<label for="ci531770282605834242" class="block oOptLbl">
<input type="checkbox" id="chk" value="Interior Design" name="chk[]" class="jsCategory4">Interior Design</label>
<label for="ci531770282601639952" class="block oOptLbl">
<input type="checkbox" id="chk" value="Mechanical Engineering" name="chk[]" class="jsCategory4">Mechanical Engineering</label>
<label for="ci531770282601639953" class="block oOptLbl">
<input type="checkbox" id="chk" value="Product Design" name="chk[]" class="jsCategory4">Product Design</label>
<label for="ci531770282605834243" class="block oOptLbl">
<input type="checkbox" id="chk" value="Other - Engineering & Architecture" name="chk[]" class="jsCategory4">Other - Engineering & Architecture</label>
</section>
</div>
<div class="col col1of3">
<section class="oOpt jsCategory5">
<h1 class="oH4">Design & Creative</h1>
<label for="ci531770282593251333" class="block oOptLbl">
<input type="checkbox" id="chk" value="Animation" name="chk[]" class="jsCategory5">Animation</label>
<label for="ci531770282593251341" class="block oOptLbl">
<input type="checkbox" id="chk" value="Audio Production" name="chk[]" class="jsCategory5">Audio Production</label>
<label for="ci531770282593251334" class="block oOptLbl">
<input type="checkbox" id="chk" value="Graphic Design" name="chk[]" class="jsCategory5">Graphic Design</label>
<label for="ci531770282593251335" class="block oOptLbl">
<input type="checkbox" id="chk" value="Illustration" name="chk[]" class="jsCategory5">Illustration</label>
<label for="ci531770282593251336" class="block oOptLbl">
<input type="checkbox" id="chk" value="Logo Design & Branding" name="chk[]" class="jsCategory5">Logo Design & Branding</label>
<label for="ci531770282593251340" class="block oOptLbl">
<input type="checkbox" id="chk" value="Photography" name="chk[]" class="jsCategory5">Photography</label>
<label for="ci531770282593251337" class="block oOptLbl">
<input type="checkbox" id="chk" value="Presentations" name="chk[]" class="jsCategory5">Presentations</label>
<label for="ci531770282593251338" class="block oOptLbl">
<input type="checkbox" id="chk" value="Video Production" name="chk[]" class="jsCategory5">Video Production</label>
<label for="ci531770282593251339" class="block oOptLbl">
<input type="checkbox" id="chk" value="Voice Talent" name="chk[]" class="jsCategory5">Voice Talent</label>
<label for="ci531770282593251342" class="block oOptLbl">
<input type="checkbox" id="chk" value="Other - Design & Creative" name="chk[]" class="jsCategory5">Other - Design & Creative</label>
</section>
<section class="oOpt jsCategory6"><h1 class="oH4">Writing</h1>
<label for="ci531770282597445648" class="block oOptLbl">
<input type="checkbox" id="chk" value="Academic Writing & Research" name="chk[]" class="jsCategory6">Academic Writing & Research</label>
<label for="ci531770282597445642" class="block oOptLbl">
<input type="checkbox" id="chk" value="Article & Blog Writing" name="chk[]" class="jsCategory6">Article & Blog Writing</label>
<label for="ci531770282597445643" class="block oOptLbl">
<input type="checkbox" id="chk" value="Copywriting" name="chk[]" class="jsCategory6">Copywriting</label>
<label for="ci531770282597445645" class="block oOptLbl">
<input type="checkbox" id="chk" value="Creative Writing" name="chk[]" class="jsCategory6">Creative Writing</label>
<label for="ci531770282597445644" class="block oOptLbl">
<input type="checkbox" id="chk" value="Editing & Proofreading" name="chk[]" class="jsCategory6">Editing & Proofreading</label>
<label for="ci531770282601639936" class="block oOptLbl">
<input type="checkbox" id="chk" value="Grant Writing" name="chk[]" class="jsCategory6">Grant Writing</label>
<label for="ci531770282601639937" class="block oOptLbl">
<input type="checkbox" id="chk" value="Resumes & Cover Letters" name="chk[]" class="jsCategory6">Resumes & Cover Letters</label>
<label for="ci531770282597445646" class="block oOptLbl">
<input type="checkbox" id="chk" value="Technical Writing" name="chk[]" class="jsCategory6">Technical Writing</label>
<label for="ci531770282597445647" class="block oOptLbl">
<input type="checkbox" id="chk" value="Web Content" name="chk[]" class="jsCategory6">Web Content</label>
<label for="ci531770282601639938" class="block oOptLbl">
<input type="checkbox" id="chk" value="Other - Writing" name="chk[]" class="jsCategory6">Other - Writing</label>
</section>
<section class="oOpt jsCategory7">
<h1 class="oH4">Translation</h1>
<label for="ci531770282601639939" class="block oOptLbl">
<input type="checkbox" id="chk" value="General Translation" name="chk[]" class="jsCategory7">General Translation</label>
<label for="ci531770282601639940" class="block oOptLbl">
<input type="checkbox" id="chk" value="Legal Translation" name="chk[]" class="jsCategory7">Legal Translation</label>
<label for="ci531770282601639942" class="block oOptLbl">
<input type="checkbox" id="chk" value="Medical Translation" name="chk[]" class="jsCategory7">Medical Translation</label>
<label for="ci531770282601639941" class="block oOptLbl">
<input type="checkbox" id="chk" value="Technical Translation" name="chk[]" class="jsCategory7">Technical Translation</label>
</section>
<section class="oOpt jsCategory8">
<h1 class="oH4">Legal</h1>
<label for="ci531770282605834246" class="block oOptLbl">
<input type="checkbox" id="chk" value="Contract Law" name="chk[]" class="jsCategory8">Contract Law</label>
<label for="ci531770282605834245" class="block oOptLbl">
<input type="checkbox" id="chk" value="Corporate Law" name="chk[]" class="jsCategory8">Corporate Law</label>
<label for="ci531770282605834247" class="block oOptLbl">
<input type="checkbox" id="chk" value="Criminal Law" name="chk[]" class="jsCategory8">Criminal Law</label>
<label for="ci531770282605834248" class="block oOptLbl">
<input type="checkbox" id="chk" value="Family Law" name="chk[]" class="jsCategory8">Family Law</label>
<label for="ci531770282605834244" class="block oOptLbl">
<input type="checkbox" id="chk" value="Intellectual Property Law" name="chk[]" class="jsCategory8">Intellectual Property Law</label>
<label for="ci531770283692158976" class="block oOptLbl">
<input type="checkbox" id="chk" value="Paralegal Services" name="chk[]" class="jsCategory8">Paralegal Services</label>
<label for="ci531770283696353280" class="block oOptLbl">
<input type="checkbox" id="chk" value="Other - Legal" name="chk[]" class="jsCategory8">Other - Legal</label>
</section>
</div>
<div class="col col1of3">
<section class="oOpt jsCategory9">
<h1 class="oH4">Admin Support</h1>
<label for="ci531770282584862724" class="block oOptLbl">
<input type="checkbox" id="chk" value="Data Entry" name="chk[]" class="jsCategory9">Data Entry</label>
<label for="ci531770282584862725" class="block oOptLbl">
<input type="checkbox" id="chk" value="Personal / Virtual Assistant" name="chk[]" class="jsCategory9">Personal / Virtual Assistant</label>
<label for="ci531770282584862728" class="block oOptLbl">
<input type="checkbox" id="chk" value="Project Management" name="chk[]" class="jsCategory9">Project Management</label>
<label for="ci531770282584862727" class="block oOptLbl">
<input type="checkbox" id="chk" value="Transcription" name="chk[]" class="jsCategory9">Transcription</label>
<label for="ci531770282584862726" class="block oOptLbl">
<input type="checkbox" id="chk" value="Web Research" name="chk[]" class="jsCategory9">Web Research</label>
<label for="ci531770282584862729" class="block oOptLbl">
<input type="checkbox" id="chk" value="Other - Admin Support" name="chk[]" class="jsCategory9">Other - Admin Support</label>
</section>
<section class="oOpt jsCategory10">
<h1 class="oH4">Customer Service</h1>
<label for="ci531770282584862730" class="block oOptLbl">
<input type="checkbox" id="chk" value="Customer Service" name="chk[]" class="jsCategory10">Customer Service</label>
<label for="ci531770282584862731" class="block oOptLbl">
<input type="checkbox" id="chk" value="Technical Support" name="chk[]" class="jsCategory10">Technical Support</label>
<label for="ci531770282584862732" class="block oOptLbl">
<input type="checkbox" id="chk" value="Other - Customer Service" name="chk[]" class="jsCategory10">Other - Customer Service</label>
</section>
<section class="oOpt jsCategory11">
<h1 class="oH4">Sales & Marketing</h1>
<label for="ci531770282597445636" class="block oOptLbl">
<input type="checkbox" id="chk" value="Display Advertising" name="chk[]" class="jsCategory11">Display Advertising</label>
<label for="ci531770282597445632" class="block oOptLbl">
<input type="checkbox" id="chk" value="Email & Marketing Automation" name="chk[]" class="jsCategory11">Email & Marketing Automation</label>
<label for="ci531770282597445634" class="block oOptLbl">
<input type="checkbox" id="chk" value="Lead Generation" name="chk[]" class="jsCategory11">Lead Generation</label>
<label for="ci531770282597445633" class="block oOptLbl">
<input type="checkbox" id="chk" value="Market & Customer Research" name="chk[]" class="jsCategory11">Market & Customer Research</label>
<label for="ci531770282593251343" class="block oOptLbl">
<input type="checkbox" id="chk" value="Marketing Strategy" name="chk[]" class="jsCategory11">Marketing Strategy</label>
<label for="ci531770282593251344" class="block oOptLbl">
<input type="checkbox" id="chk" value="Public Relations" name="chk[]" class="jsCategory11">Public Relations</label>
<label for="ci531770282597445637" class="block oOptLbl">
<input type="checkbox" id="chk" value="SEM - Search Engine Marketing" name="chk[]" class="jsCategory11">SEM - Search Engine Marketing</label>
<label for="ci531770282597445638" class="block oOptLbl">
<input type="checkbox" id="chk" value="SEO - Search Engine Optimization" name="chk[]" class="jsCategory11">SEO - Search Engine Optimization</label>
<label for="ci531770282597445639" class="block oOptLbl">
<input type="checkbox" id="chk" value="SMM - Social Media Marketing" name="chk[]" class="jsCategory11">SMM - Social Media Marketing</label>
<label for="ci531770282597445635" class="block oOptLbl">
<input type="checkbox" id="chk" value="Telemarketing & Telesales" name="chk[]" class="jsCategory11">Telemarketing & Telesales</label>
<label for="ci531770282597445641" class="block oOptLbl">
<input type="checkbox" id="chk" value="Other - Sales & Marketing" name="chk[]" class="jsCategory11">Other - Sales & Marketing</label>
</section>
<section class="oOpt jsCategory12">
<h1 class="oH4">Accounting & Consulting</h1>
<label for="ci531770282601639943" class="block oOptLbl">
<input type="checkbox" id="chk" value="Accounting" name="chk[]" class="jsCategory12">Accounting</label>
<label for="ci531770282601639945" class="block oOptLbl">
<input type="checkbox" id="chk" value="Financial Planning" name="chk[]" class="jsCategory12">Financial Planning</label>
<label for="ci531770282601639946" class="block oOptLbl">
<input type="checkbox" id="chk" value="Human Resources" name="chk[]" class="jsCategory12">Human Resources</label>
<label for="ci531770282601639944" class="block oOptLbl">
<input type="checkbox" id="chk" value="Management Consulting" name="chk[]" class="jsCategory12">Management Consulting</label>
<label for="ci531770282601639947" class="block oOptLbl">
<input type="checkbox" id="chk" value="Other - Accounting & Consulting" name="chk[]" class="jsCategory12">Other - Accounting & Consulting</label>
</section>
</div>
</div>
<div class="submit">
<button type="submit" class="oBtn oBtnPrimary">Save Categories</button> <a data-action="cancel" class="jsLink">Cancel</a>
</div>
你可以这样做：
var total = 0;
$('#yyy input[type="checkbox"]').each(function() {
if ($(this).prop('checked')) total++;
});
相关文章：
- Angularjs - 复选框 - 计算多个选定/未选定项目
- 带复选框的数学计算
- 使用javascript选中“计算总数一次”复选框
- Ember.js数组控制器计算属性的复选框
- 嗨，我正试图将我的movieprice数组从复选框值传递给另一个计算选择总数的函数，但我的代码没有;t运行
- 点击可选复选框时如何计算价格(使用贝宝支付表单）
- 多复选框jquery计算
- 计算复选框的总数
- 计算已选中复选框的数量
- 使用隐藏字段值而不是复选框值计算合计
- 使用JavaScript计算Web表中启用的复选框
- 选中了 Javascript 计数复选框，并且不计算另一个复选框
- 我将如何创建一个javaScript函数来计算选中了多少复选框
- 计算 React.js 中的复选框
- 计算在表列中选中的复选框数
- 如何使用 onclick 事件引用按 id 计算选中的复选框
- 使用 each(） 选择并计算未选中复选框的长度
- 我们如何计算使用 javascript 在网格视图中选中的复选框数量 asp.net
- 如何在PDF文档中添加javascript来计算复选框的数量，并在文本框区域中输入值
- 使用文档计算复选框数组长度.getElementById在javascript
