多くのフォームからチェックボックスのチェックを数える方法はありますか？

Question

チェックボックスの数を数えたいと思っています。私はすべてのチェックボックスのチェックを数えるので問題がありますが、各記事のチェックボックスを数え、そこに別のboxesChecked divを表示したいと思います。 article01 checks = boxesChecked-01,article02 checks = boxesChecked-02。私はinnerhtml（）の数を知るために異なるIDメソッドを試しましたが、それは動作しないことがわかります。

var form = $(".checkform"); 
 
var checkBoxes = $(form).children('.checkbox'); 
 
var count = 0; 
 

 
$(checkBoxes).on('click', function() { 
 
    var id = $(form).attr("id").split("-")[1] 
 
    $.each(checkBoxes, function(i) { 
 
    if (checkBoxes[i].checked) { 
 
     count++; 
 
    } 
 
    }); 
 

 
    var divBoxesChecked = document.getElementById('boxesChecked-' + id); 
 
    divBoxesChecked.innerHTML = 0; 
 
    divBoxesChecked.innerHTML = count; 
 
    count = 0; 
 
});

/*CONTENT*/ 
 

 
.content01 { 
 
    width: 69%; 
 
} 
 

 
.eventsbtn { 
 
    color: #3f2916; 
 
    outline: none; 
 
    cursor: pointer; 
 
    padding: 10px; 
 
    margin-top: 40px; 
 
    font-size: 26px; 
 
    background: none; 
 
    text-align: left; 
 
    overflow: auto; 
 
    width: 284px; 
 
    border-radius: 3px; 
 
    clear: both; 
 
    margin-bottom: 0px; 
 
    font-family: 'Crete Round', serif; 
 
} 
 

 
h2.events { 
 
    padding: 18px; 
 
} 
 

 
#line { 
 
    border-style: solid; 
 
    border-bottom-width: 0px; 
 
    border-color: #ffeb6b; 
 
    margin-top: 0px; 
 
    position: absolute; 
 
    overflow: hidden; 
 
    margin-top: 92px; 
 
    width: 800px; 
 
} 
 

 
#line02 { 
 
    border-style: solid; 
 
    border-bottom-width: 0px; 
 
    border-color: #ffeb6b; 
 
    margin-top: 0px; 
 
    position: absolute; 
 
    overflow: hidden; 
 
    margin-top: 18px; 
 
    width: 800px; 
 
} 
 

 
.checkbox { 
 
    display: flex; 
 
    /*margin-bottom: 26px;*/ 
 
    /*float: left;*/ 
 
    cursor: pointer; 
 
} 
 

 
input[type='checkbox'] { 
 
    /*margin-top: 32px;*/ 
 
    transform: scale(1.7); 
 
    margin-right: 38px; 
 
    /*position: absolute;*/ 
 
} 
 

 
.article_block { 
 
    clear: both; 
 
    display: inline-block; 
 
    float: left; 
 
} 
 

 
.article_title { 
 
    overflow: hidden; 
 
    margin-top: 0px; 
 
    margin-bottom: 5px; 
 
    margin-left: 20px; 
 
} 
 

 
.article_content { 
 
    overflow: hidden; 
 
    margin-top: 0px; 
 
    margin-bottom: 0px; 
 
    margin-left: 20px; 
 
    width: 65%; 
 
    font-size: 14px; 
 
} 
 

 
.content02 { 
 
    overflow: hidden; 
 
    margin-left: 36px; 
 
} 
 

 
.content02 img { 
 
    float: left; 
 
    margin-right: 20px; 
 
} 
 

 
.button01 { 
 
    display: block; 
 
    clear: both; 
 
    text-align: center; 
 
} 
 

 
.button02 { 
 
    display: block; 
 
    clear: both; 
 
    text-align: center; 
 
} 
 

 
.buttonDone { 
 
    background-color: #a62300; 
 
    width: 212px; 
 
    height: 60px; 
 
    color: white; 
 
    font-size: 25px; 
 
    border-radius: 12px; 
 
    cursor: pointer; 
 
    margin-bottom: 20px; 
 
    margin-top: 70px; 
 
    outline: none; 
 
    font-family: arial; 
 
    font-weight: 600; 
 
} 
 

 
.buttonClass { 
 
    background-color: #a62300; 
 
    width: 212px; 
 
    height: 60px; 
 
    color: white; 
 
    font-weight: 600; 
 
    font-family: arial; 
 
    font-size: 25px; 
 
    border-radius: 12px; 
 
    cursor: pointer; 
 
    margin-bottom: 0px; 
 
    margin-top: 15px; 
 
    outline: none; 
 
} 
 

 
.footer { 
 
    position: absolute; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    padding: 3rem; 
 
    background-color: #3b3530; 
 
    text-align: left; 
 
    font-size: 18px; 
 
} 
 

 
.footer_content { 
 
    max-width: 1024px; 
 
    margin: 0 auto; 
 
    color: white; 
 
    margin-top: 25px; 
 
} 
 

 
a { 
 
    color: #ffe756; 
 
} 
 

 

 
/*POPUP*/ 
 

 
.button { 
 
    font-size: 18px; 
 
    /*padding: 10px;*/ 
 
    color: #ffe756; 
 
    text-decoration: underline; 
 
    cursor: pointer; 
 
    transition: all 0.3s ease-out; 
 
} 
 

 
.popup h2 { 
 
    color: #3f2916; 
 
} 
 

 
.popup p { 
 
    margin-top: 0em; 
 
    margin-bottom: 1em; 
 
    font-family: 'rubik', sans-serif; 
 
} 
 

 
.overlay { 
 
    position: fixed; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    background: rgba(0, 0, 0, 0.7); 
 
    transition: opacity 500ms; 
 
    visibility: hidden; 
 
    opacity: 0; 
 
} 
 

 
.overlay:target { 
 
    visibility: visible; 
 
    opacity: 1; 
 
} 
 

 
.popup { 
 
    margin: 70px auto; 
 
    padding: 20px; 
 
    background: #fff; 
 
    /*border-radius: 5px;*/ 
 
    width: 50%; 
 
    position: relative; 
 
    transition: all 5s ease-in-out; 
 
} 
 

 
.popup h2 { 
 
    margin-top: 0; 
 
    margin-bottom: 15px; 
 
    color: #333; 
 
    font-family: 'rubik', sans-serif; 
 
} 
 

 
.popup .close { 
 
    position: absolute; 
 
    top: 20px; 
 
    right: 30px; 
 
    transition: all 200ms; 
 
    font-size: 30px; 
 
    font-weight: bold; 
 
    text-decoration: none; 
 
    color: #333; 
 
} 
 

 
.popup .close:hover { 
 
    color: #06D85F; 
 
} 
 

 
.popup .content { 
 
    max-height: 30%; 
 
    overflow: auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h3>ARTICLE1</h3> 
 
<div id="boxesChecked-01"></div> 
 

 
<div class="article01 panel"> 
 

 
    <form class="checkform" id="form-01"> 
 
    <input type="checkbox" id="box_01" class="checkbox" name="box_01" /> 
 
    <label class="checkbox"><div class="article_block"><div class="content02"><img src="article_img1.png"><h3 class="article_title">TEST1</h3><p class="article_content">1820: TEST</p></div></div></label> 
 

 
    <input type="checkbox" id="box_02" class="checkbox" name="box_02" /> 
 
    <label class="checkbox"><div class="article_block" ><div class="content02"><img src="article_img2.png"><h3 class="article_title">TEST</h3><p class="article_content">TEST</p></div></div></label> 
 

 
    <input type="checkbox" id="box_03" class="checkbox" name="box_03" /> 
 
    <label class="checkbox"><div class="article_block" ><div class="content02"><img src="article_img3.png"><h3 class="article_title">TEST</h3><p class="article_content">TEST</p></div></div></label> 
 

 
    <input type="checkbox" id="box_04" class="checkbox" name="box_04" /> 
 
    <label class="checkbox"><div class="article_block" ><div class="content02"><img src="article_img4.png"><h3 class="article_title">TEST</h3><p class="article_content">TEST</p></div></div></label> 
 

 
    <input type="checkbox" id="box_05" class="checkbox" name="box_05" /> 
 
    <label class="checkbox"><div class="article_block" ><div class="content02"><img src="article_img5.png"><h3 class="article_title">TEST</h3><p class="article_content">TEST</p></div></div></label> 
 

 
    <input type="checkbox" id="box_06" class="checkbox" name="box_06" /> 
 
    <label class="checkbox"><div class="article_block" ><div class="content02"><img src="article_img6.png"><h3 class="article_title">TEST</h3><p class="article_content">TEST</p></div></div></label> 
 

 
    <input type="checkbox" id="box_07" class="checkbox" name="box_07" /> 
 
    <label class="checkbox"><div class="article_block" ><div class="content02"><img src="article_img7.png"><h3 class="article_title">TEST</h3><p class="article_content">TEST</p></div></div></label> 
 
    </form> 
 
</div> 
 
<h3>ARTICLE2</h3> 
 
<div id="boxesChecked-02"></div> 
 
<div class="article02 panel"> 
 
    <form class="checkform" id="form-02"> 
 
    <input type="checkbox" id="box_01" class="checkbox" name="box_01" /> 
 
    <label class="checkbox"><div class="article_block"><div class="content02"><img src="article_img1.png"><h3 class="article_title">TEST1</h3><p class="article_content">1820: TEST</p></div></div></label> 
 

 
    <input type="checkbox" id="box_02" class="checkbox" name="box_02" /> 
 
    <label class="checkbox"><div class="article_block" ><div class="content02"><img src="article_img2.png"><h3 class="article_title">TEST</h3><p class="article_content">TEST</p></div></div></label> 
 

 
    <input type="checkbox" id="box_03" class="checkbox" name="box_03" /> 
 
    <label class="checkbox"><div class="article_block" ><div class="content02"><img src="article_img3.png"><h3 class="article_title">TEST</h3><p class="article_content">TEST</p></div></div></label> 
 

 
    <input type="checkbox" id="box_04" class="checkbox" name="box_04" /> 
 
    <label class="checkbox"><div class="article_block" ><div class="content02"><img src="article_img4.png"><h3 class="article_title">TEST</h3><p class="article_content">TEST</p></div></div></label> 
 

 
    <input type="checkbox" id="box_05" class="checkbox" name="box_05" /> 
 
    <label class="checkbox"><div class="article_block" ><div class="content02"><img src="article_img5.png"><h3 class="article_title">TEST</h3><p class="article_content">TEST</p></div></div></label> 
 

 
    <input type="checkbox" id="box_06" class="checkbox" name="box_06" /> 
 
    <label class="checkbox"><div class="article_block" ><div class="content02"><img src="article_img6.png"><h3 class="article_title">TEST</h3><p class="article_content">TEST</p></div></div></label> 
 

 
    <input type="checkbox" id="box_07" class="checkbox" name="box_07" /> 
 
    <label class="checkbox"><div class="article_block" ><div class="content02"><img src="article_img7.png"><h3 class="article_title">TEST</h3><p class="article_content">TEST</p></div></div></label> 
 
    </form> 
 
</div>

Answer 1

と同じことを行うには、次のものが必要各フォームを1回ループします。

また、チェックボックスの数を確認するためにチェックボックスをループする必要はありません。 :checked擬似クラスのセレクタを使用してそれらをセットにし、そのセットのlengthを調べてください。

// We want to get a set of all the form elements 
 
var $forms = $("form"); 
 

 
// Loop over each form 
 
$forms.each(function(idx, frm){ 
 

 
    // Set up click event handlers for each checkbox 
 
    $(".checkbox", frm).on('click', function() { 
 
    // Just set the output element's text to the count of the checked 
 
    // checkboxes in the current form being enumerated 
 
    $("." + frm.id).text(frm.id + " has " + $(".checkbox:checked", frm).length + " checked checkboxes."); 
 
    }); 
 
});

/*CONTENT*/ 
 
.content01{ 
 
\t width: 69%; 
 
} 
 
.eventsbtn{ 
 
\t color:#3f2916; 
 
\t outline: none; 
 
\t cursor: pointer; 
 
\t padding: 10px; 
 
\t margin-top: 40px; 
 
\t font-size: 26px; 
 
\t background:none; 
 
\t text-align: left; 
 
\t overflow: auto; 
 
\t width: 284px; 
 
\t border-radius: 3px; 
 
\t clear: both; 
 
\t margin-bottom: 0px; 
 
\t font-family: 'Crete Round', serif; 
 
} 
 
h2.events { 
 
\t padding:18px; 
 
} 
 
#line{ 
 
\t border-style: solid; 
 
    border-bottom-width: 0px; 
 
    border-color: #ffeb6b; 
 
    margin-top: 0px; 
 
    position: absolute; 
 
    overflow: hidden; 
 
    margin-top: 92px; 
 
    width: 800px; 
 
} 
 
#line02{ 
 
\t border-style: solid; 
 
    border-bottom-width: 0px; 
 
    border-color: #ffeb6b; 
 
    margin-top: 0px; 
 
    position: absolute; 
 
    overflow: hidden; 
 
    margin-top: 18px; 
 
    width: 800px; 
 

 
} 
 
.checkbox{ 
 
\t display: flex; 
 
\t /*margin-bottom: 26px;*/ 
 
\t /*float: left;*/ 
 
\t cursor: pointer; 
 
} 
 
input[type='checkbox'] { 
 
\t /*margin-top: 32px;*/ 
 
\t transform: scale(1.7); 
 
\t margin-right: 38px; 
 
\t /*position: absolute;*/ 
 
} 
 

 

 
.article_block{ 
 
\t clear: both; 
 
\t display: inline-block; 
 
\t float: left; 
 
} 
 
.article_title{ 
 
\t overflow: hidden; 
 
\t margin-top: 0px; 
 
\t margin-bottom: 5px; 
 
\t margin-left: 20px; 
 
} 
 
.article_content { 
 
\t overflow:hidden; 
 
\t margin-top: 0px; 
 
\t margin-bottom: 0px; 
 
\t margin-left: 20px; 
 
\t width: 65%; 
 
\t font-size: 14px; 
 

 
} 
 
.content02{ 
 
\t overflow: hidden; 
 
\t margin-left: 36px; 
 
} 
 
.content02 img{ 
 
\t float: left; 
 
\t margin-right: 20px; 
 
} 
 
.button01{ 
 
\t display: block; 
 
\t clear: both; 
 
\t text-align: center; 
 
} 
 
.button02{ 
 
\t display: block; \t 
 
\t clear: both; 
 
\t text-align: center; 
 
} 
 
.buttonDone{ 
 
\t background-color: #a62300; 
 
\t width: 212px; 
 
\t height: 60px; 
 
\t color: white; 
 
\t font-size: 25px; 
 
\t border-radius: 12px; 
 
\t cursor: pointer; 
 
\t margin-bottom: 20px; 
 
\t margin-top: 70px; 
 
\t outline: none; 
 
\t font-family: arial; 
 
\t font-weight: 600; 
 
} 
 
.buttonClass{ 
 
\t background-color: #a62300; 
 
\t width: 212px; 
 
\t height: 60px; 
 
\t color: white; 
 
\t font-weight: 600; 
 
\t font-family: arial; 
 
\t font-size: 25px; 
 
\t border-radius: 12px; 
 
\t cursor: pointer; 
 
\t margin-bottom: 0px; 
 
\t margin-top: 15px; 
 
\t outline: none; 
 
} 
 
.footer { 
 
    position: absolute; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    padding: 3rem; 
 
    background-color: #3b3530; 
 
    text-align: left; 
 
    
 
    font-size: 18px; 
 
} 
 
.footer_content{ 
 
    \t max-width: 1024px; 
 
    \t margin:0 auto; 
 
    \t color: white; 
 
    \t margin-top: 25px; 
 
} 
 
a { 
 
\t color:#ffe756; 
 
} 
 
/*POPUP*/ 
 
.button { 
 
    font-size: 18px; 
 
    /*padding: 10px;*/ 
 
    color: #ffe756; 
 
    text-decoration: underline; 
 
    cursor: pointer; 
 
    transition: all 0.3s ease-out; 
 
} 
 

 
.popup h2 { 
 
\t color:#3f2916; 
 
} 
 
.popup p { 
 
    margin-top: 0em; 
 
    margin-bottom: 1em; 
 
    font-family: 'rubik', sans-serif; 
 
} 
 
.overlay { 
 
    position: fixed; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    background: rgba(0, 0, 0, 0.7); 
 
    transition: opacity 500ms; 
 
    visibility: hidden; 
 
    opacity: 0; 
 
} 
 
.overlay:target { 
 
    visibility: visible; 
 
    opacity: 1; 
 
} 
 

 
.popup { 
 
    margin: 70px auto; 
 
    padding: 20px; 
 
    background: #fff; 
 
    /*border-radius: 5px;*/ 
 
    width: 50%; 
 
    position: relative; 
 
    transition: all 5s ease-in-out; 
 
} 
 

 
.popup h2 { 
 
    margin-top: 0; 
 
    margin-bottom: 15px; 
 
    color: #333; 
 
    font-family: 'rubik', sans-serif; 
 
} 
 
.popup .close { 
 
    position: absolute; 
 
    top: 20px; 
 
    right: 30px; 
 
    transition: all 200ms; 
 
    font-size: 30px; 
 
    font-weight: bold; 
 
    text-decoration: none; 
 
    color: #333; 
 
} 
 
.popup .close:hover { 
 
    color: #06D85F; 
 
} 
 
.popup .content { 
 
    max-height: 30%; 
 
    overflow: auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h3>ARTICLE1</h3> 
 
<div id="boxesChecked-01"></div> 
 
    <div class="article01 panel"> 
 
    <form class="checkform" id="form-01"> 
 
     <input type="checkbox" id="box_01" class="checkbox" name="box_01" /> 
 
     <label class="checkbox"><div class="article_block"> 
 
     <div class="content02"><img src="article_img1.png"> 
 
     <h3 class="article_title">TEST1</h3><p class="article_content">1820: TEST</p></div></div> 
 
     </label> 
 

 
     <input type="checkbox" id="box_02" class="checkbox" name="box_02" /> 
 
     <label class="checkbox"><div class="article_block" ><div class="content02"> 
 
     <img src="article_img2.png"><h3 class="article_title">TEST</h3><p class="article_content">TEST</p></div></div> 
 
     </label> 
 

 
        <input type="checkbox" id="box_03" class="checkbox" name="box_03" /> 
 
        <label class="checkbox"><div class="article_block" ><div class="content02"><img src="article_img3.png"><h3 class="article_title">TEST</h3><p class="article_content">TEST</p></div></div></label> 
 

 
        <input type="checkbox" id="box_04" class="checkbox" name="box_04" /> 
 
        <label class="checkbox"><div class="article_block" ><div class="content02"><img src="article_img4.png"><h3 class="article_title">TEST</h3><p class="article_content">TEST</p></div></div></label> 
 

 
        <input type="checkbox" id="box_05" class="checkbox" name="box_05" /> 
 
        <label class="checkbox"><div class="article_block" ><div class="content02"><img src="article_img5.png"><h3 class="article_title">TEST</h3><p class="article_content">TEST</p></div></div></label> 
 

 
        <input type="checkbox" id="box_06" class="checkbox" name="box_06"/> 
 
        <label class="checkbox"><div class="article_block" ><div class="content02"><img src="article_img6.png"><h3 class="article_title">TEST</h3><p class="article_content">TEST</p></div></div></label> 
 

 
        <input type="checkbox" id="box_07" class="checkbox" name="box_07" /> 
 
        <label class="checkbox"><div class="article_block" ><div class="content02"><img src="article_img7.png"><h3 class="article_title">TEST</h3><p class="article_content">TEST</p></div></div></label> 
 

 
        </form> 
 

 

 
        </div> 
 
        <h3>ARTICLE2</h3> 
 
<div id="boxesChecked-02"></div> 
 
    <div class="article02 panel"> 
 

 
         <form class="checkform" id="form-02"> 
 
         <input type="checkbox" id="box_01" class="checkbox" name="box_01" /> 
 
         <label class="checkbox"><div class="article_block"><div class="content02"><img src="article_img1.png"><h3 class="article_title">TEST1</h3><p class="article_content">1820: TEST</p></div></div></label> 
 

 
         <input type="checkbox" id="box_02" class="checkbox" name="box_02" /> 
 
         <label class="checkbox"><div class="article_block" ><div class="content02"><img src="article_img2.png"><h3 class="article_title">TEST</h3><p class="article_content">TEST</p></div></div></label> 
 

 
         <input type="checkbox" id="box_03" class="checkbox" name="box_03" /> 
 
         <label class="checkbox"><div class="article_block" ><div class="content02"><img src="article_img3.png"><h3 class="article_title">TEST</h3><p class="article_content">TEST</p></div></div></label> 
 

 
         <input type="checkbox" id="box_04" class="checkbox" name="box_04" /> 
 
         <label class="checkbox"><div class="article_block" ><div class="content02"><img src="article_img4.png"><h3 class="article_title">TEST</h3><p class="article_content">TEST</p></div></div></label> 
 

 
         <input type="checkbox" id="box_05" class="checkbox" name="box_05" /> 
 
         <label class="checkbox"><div class="article_block" ><div class="content02"><img src="article_img5.png"><h3 class="article_title">TEST</h3><p class="article_content">TEST</p></div></div></label> 
 

 
         <input type="checkbox" id="box_06" class="checkbox" name="box_06"/> 
 
         <label class="checkbox"><div class="article_block" ><div class="content02"><img src="article_img6.png"><h3 class="article_title">TEST</h3><p class="article_content">TEST</p></div></div></label> 
 

 
         <input type="checkbox" id="box_07" class="checkbox" name="box_07" /> 
 
         <label class="checkbox"><div class="article_block" ><div class="content02"><img src="article_img7.png"><h3 class="article_title">TEST</h3><p class="article_content">TEST</p></div></div></label> 
 

 
         </form> 
 

 

 
         </div> 
 
         
 
<div class="form-01"></div> 
 
<div class="form-02"></div>

Answer 2

反復各フォームは、表示のdivに

$('.checkform').each(function(){ 
    var $form = $(this) 
    var checkCount = $form.find(':checkbox:checked').length; 
    $form.parent().prev().text('Checked count: ' +checkCount); 
}); 

をトラバースあなたの代わりにクラスをインクリメントの一般的なクラス名を使用した場合に簡単だろう。

....を通じてあなたがフォーム上で同じクラスを使用するには、代わりにちょうど確認するチェックボックスを見つけるために一度すべてform要素をループの他の一般的な主な要素