JavaScript jQueryを使った checkbox の操作方法・その２（チェック件数）

2020/02/06

今回は checkbox がチェックされている状態のものを全てカウントする方法について説明します。
以下のソースは以下の記事を少し変更したものです。
⇒JavaScript jQueryを使った checkbox の操作方法

■チェック件数取得

<html>
<head>
<meta charset="utf-8">
<title>test checkbox</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
// 初期処理
$(function(){
    // 全てのチェックボックスをOFF
    $('input[type="checkbox"]').prop('checked', false);
});
// チェック件数取得関数
function getCountChk() {
    var intCnt = 0;
    // 選択済チェックボックス
    $('input[type="checkbox"]:checked').each(function() {
        intCnt += 1;
    });
    alert("チェック件数:" + intCnt);
    return false;
}
</script>
</head>
<body>
    <h2>test checkbox</h2>
    <label><input id="chk1" type="checkbox" value="1" />チェック1</label><br />
    <label><input id="chk2" type="checkbox" value="2" />チェック2</label><br />
    <label><input id="chk3" type="checkbox" value="3" />チェック3</label><br />
    <br />
    <button onclick="getCountChk();">チェック件数取得</button>
</body>
</html>

16行目の $('input[type="checkbox"]:checked').each の部分でチェックされている全てのチェックボックスを列挙してカウントしています。これは非常にベタな方法で、個別に処理する必要が無ければ、以下の様にした方がより簡単にできます。

■チェック件数取得その２

<html>
<head>
<meta charset="utf-8">
<title>test checkbox</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
// 初期処理
$(function(){
    // 全てのチェックボックスをOFF
    $('input[type="checkbox"]').prop('checked', false);
});
// チェック件数取得関数
function getCountChk() {
    // 選択済チェックボックス
    var intCnt = $('input[type="checkbox"]:checked').length;
    alert("チェック件数:" + intCnt);
    return false;
}
</script>
</head>
<body>
    <h2>test checkbox</h2>
    <label><input id="chk1" type="checkbox" value="1" />チェック1</label><br />
    <label><input id="chk2" type="checkbox" value="2" />チェック2</label><br />
    <label><input id="chk3" type="checkbox" value="3" />チェック3</label><br />
    <br />
    <button onclick="getCountChk();">チェック件数取得</button>
</body>
</html>

入力画面でグループが異なるチェックボックスを設置することがありますので、その方法について例を示します。以下の例では、上のソース15行目の $('input[type="checkbox"]:checked').length の部分で name 属性でアクセスする様に変更しています。

■チェック件数取得その３

<html>
<head>
<meta charset="utf-8">
<title>test checkbox</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
// 初期処理
$(function(){
    // 全てのチェックボックスをOFF
    $('input[type="checkbox"]').prop('checked', false);
});
// チェック件数取得関数
function getCountChk(strName) {
    // 選択済チェックボックス
    var intCnt = $('input[name="' + strName + '[]"]:checked').length;
    alert("チェック件数:" + intCnt);
    return false;
}
</script>
</head>
<body>
    <h2>test checkbox 1</h2>
    <label><input name="chk1[]" type="checkbox" value="1" />チェック1-1</label><br />
    <label><input name="chk1[]" type="checkbox" value="2" />チェック1-2</label><br />
    <label><input name="chk1[]" type="checkbox" value="3" />チェック1-3</label><br />
    <br />
    <button onclick="getCountChk('chk1');">チェック件数取得</button>
    <br />
    <br />
    <h2>test checkbox 2</h2>
    <label><input name="chk2[]" type="checkbox" value="10" />チェック2-1</label><br />
    <label><input name="chk2[]" type="checkbox" value="20" />チェック2-2</label><br />
    <label><input name="chk2[]" type="checkbox" value="30" />チェック2-3</label><br />
    <br />
    <button onclick="getCountChk('chk2');">チェック件数取得</button>
</body>
</html>

JavaScript
0CM

コメントを書く