忍者ブログ

VB.NET-TIPS などプログラミングについて

VB.NETのTIPS(小技集)を中心に、Javascript、PHP その他のプログラミングについて少し役に立つ情報を発信します。いわゆる個人的な忘備録ですが、みなさんのお役に立てれば幸いです。

JavaScript jQueryを使った checkbox の操作方法・その2(チェック件数)

今回は 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 の部分でチェックされている全てのチェックボックスを列挙して カウントしています。 これは非常にベタな方法で、個別に処理する必要が無ければ、以下の様にした方がより簡単にできます。

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

<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 属性でアクセスする様に変更しています。

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

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











PR

コメント

コメントを書く