Функция для получения количества отмеченных флажков в div

Question

Я пытаюсь создать функцию JQuery, которая получит количество проверочных флажков в пределах определенного div, который передается в качестве аргумента.

var max = 1; 
function checkMax(e) { 
    var item = $("#" + e).html().find("input:checked"); 
    var checked = item > ":input:checked"; 

    alert(item);  
} 

if (item >= max){ 
preventDefault(); 
} 

Кроме того, как можно предотвратить, чтобы пользователь мог проверить флажок, если максимальное количество разрешенных флажков было проверено уже

Answer 1

Получить :checked элемент, используя .find() затем использовать length свойство.

var item = $("#" + e).find("input:checked"); 
alert(item.length); 

Нет необходимости использовать .html()

Answer 2

Как спросили ОП, я создал функции, что принимает элемент и проверяет содержимое для флажков. В простых способов, вы можете сделать с помощью одного переключателя:

$(function() { 
 
    $("a").click(function() { 
 
    checkHowMany($(this).closest("div")); 
 
    return false; 
 
    }); 
 
    function checkHowMany($div) { 
 
    var num = $div.find(".chk-box:checked").length; 
 
    alert("There are " + num + " checked check boxes."); 
 
    } 
 
});

* {font-family: 'Segoe UI';} 
 
label {display: block;} 
 
div {margin-bottom: 10px;} 
 
a {display: inline-block; text-decoration: none; padding: 5px; border: 1px solid #ccc; border-radius: 3px; color: #000;}

<script src="https://code.jquery.com/jquery-2.2.4.js"></script> 
 
<div class="section-1"> 
 
    <label><input type="checkbox" class="chk-box"> Check Me</label> 
 
    <label><input type="checkbox" class="chk-box"> Check Me</label> 
 
    <label><input type="checkbox" class="chk-box"> Check Me</label> 
 
    <label><input type="checkbox" class="chk-box"> Check Me</label> 
 
    <a href="">Check how many checked in this Section.</a> 
 
</div> 
 
<div class="section-2"> 
 
    <label><input type="checkbox" class="chk-box"> Check Me</label> 
 
    <label><input type="checkbox" class="chk-box"> Check Me</label> 
 
    <label><input type="checkbox" class="chk-box"> Check Me</label> 
 
    <label><input type="checkbox" class="chk-box"> Check Me</label> 
 
    <a href="">Check how many checked in this Section.</a> 
 
</div> 
 
<div class="section-3"> 
 
    <label><input type="checkbox" class="chk-box"> Check Me</label> 
 
    <label><input type="checkbox" class="chk-box"> Check Me</label> 
 
    <label><input type="checkbox" class="chk-box"> Check Me</label> 
 
    <label><input type="checkbox" class="chk-box"> Check Me</label> 
 
    <a href="">Check how many checked in this Section.</a> 
 
</div>

Здесь <a> вызывает функцию с его родительским <div> как аргумент передается в функцию.

Answer 3

Проверьте это -

$("#btn1").click(function() { 
 
    getCheckedLength("container1") 
 
}); 
 

 
$("#btn2").click(function() { 
 
getCheckedLength("container2") 
 
}); 
 

 
function getCheckedLength(id) { 
 
    var $div = $("#" + id); 
 
    alert($("input[type='checkbox']:checked", $div).length); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
<div id="container1"> 
 
    <input type="checkbox">1 &nbsp;&nbsp; 
 
    <input type="checkbox">2 &nbsp;&nbsp; 
 
    <input type="checkbox">3 &nbsp;&nbsp; 
 
</div> 
 

 
<div id="container2"> 
 
    <input type="checkbox">4 &nbsp;&nbsp; 
 
    <input type="checkbox">5 &nbsp;&nbsp; 
 
    <input type="checkbox">6 &nbsp;&nbsp; 
 
</div> 
 

 
<input type="button" id="btn1" value="Get checked number form div 1"> 
 
<input type="button" id="btn2" value="Get checked number form div 2">