如何通过 id 使用 onclick 事件引用来计算选中的复选框？

Question

如何使用 onclick 事件 ref 按 id 计算选中的复选框？

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);    
}

Answer 1

你可以这样做：

var total = 0;
$('#yyy input[type="checkbox"]').each(function() {
 if ($(this).prop('checked')) total++;
});

Answer 2

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." );
}

Answer 3

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>

Answer 4

<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>

============================================= ======= Html

  <section class="oOpt jsCategory1">
  <h1 class="oH4">Web, Mobile &amp; 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 &amp; Testing"   name="chk[]" class="jsCategory1">QA &amp; Testing</label>

  <label for="ci531770282589057028" class="block oOptLbl">

  <input type="checkbox" id="chk" value="Scripts &amp; Utilities"  name="chk[]" class="jsCategory1">Scripts &amp; 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 &amp; Mobile Design"  name="chk[]" class="jsCategory1">Web &amp; 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 &amp; 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 &amp; System Administration"  name="chk[]" class="jsCategory2">Network &amp; System Administration</label>

  <label for="ci531770282589057037" class="block oOptLbl">

  <input type="checkbox" id="chk" value="Other - IT &amp; Networking"  name="chk[]" class="jsCategory2">Other - IT &amp; Networking</label>
  </section>

  <section class="oOpt jsCategory3">
  <h1 class="oH4">Data Science &amp; 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 &amp; Management"  name="chk[]"  class="jsCategory3">Data Mining &amp; 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 &amp; Analytics"  name="chk[]" class="jsCategory3">Other - Data Science &amp; Analytics</label>

  </section>

  <section class="oOpt jsCategory4">

  <h1 class="oH4">Engineering &amp; Architecture</h1>

  <label for="ci531770282601639948" class="block oOptLbl">

  <input type="checkbox" id="chk" value="3D Modeling &amp; CAD"  name="chk[]" class="jsCategory4">3D Modeling &amp; 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 &amp; Structural Engineering"  name="chk[]" class="jsCategory4">Civil &amp; 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 &amp; Architecture"  name="chk[]" class="jsCategory4">Other - Engineering &amp; Architecture</label>
  </section>

  </div>
  <div class="col col1of3">
  <section class="oOpt jsCategory5">
  <h1 class="oH4">Design &amp; 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 &amp; Branding"  name="chk[]"  class="jsCategory5">Logo Design &amp; 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 &amp; Creative"  name="chk[]" class="jsCategory5">Other - Design &amp; 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 &amp; Research"  name="chk[]" class="jsCategory6">Academic Writing &amp; Research</label>

  <label for="ci531770282597445642" class="block oOptLbl">
  <input type="checkbox" id="chk" value="Article &amp; Blog Writing"  name="chk[]" class="jsCategory6">Article &amp; 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 &amp; Proofreading"  name="chk[]" class="jsCategory6">Editing &amp; 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 &amp; Cover Letters"  name="chk[]" class="jsCategory6">Resumes &amp; 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 &amp; 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 &amp; Marketing Automation"  name="chk[]" class="jsCategory11">Email &amp; 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 &amp; Customer Research"  name="chk[]" class="jsCategory11">Market &amp; 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 &amp; Telesales"  name="chk[]" class="jsCategory11">Telemarketing &amp; Telesales</label>

  <label for="ci531770282597445641" class="block oOptLbl">
  <input type="checkbox" id="chk" value="Other - Sales &amp; Marketing"  name="chk[]" class="jsCategory11">Other - Sales &amp; Marketing</label>

  </section>

  <section class="oOpt jsCategory12">
  <h1 class="oH4">Accounting &amp; 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 &amp; Consulting"  name="chk[]" class="jsCategory12">Other - Accounting &amp; Consulting</label>

  </section>

  </div>
  </div>
  <div class="submit">
  <button type="submit" class="oBtn oBtnPrimary">Save Categories</button>&nbsp;&nbsp;<a data-action="cancel" class="jsLink">Cancel</a>
  </div>

如何通过 id 使用 onclick 事件引用来计算选中的复选框？

How to count checked checkbox using onclick event ref by id?

html

javascript

checkbox

jquery

onclick