[ JavaScript ] チェックシートで合計点を計算するサンプル

JavaScript

▲ サンプルのイメージです。

チェックボックスの value を加算して表示するサンプル ———————————————————————-

サンプルコード

<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>チェックボックスの value を加算して表示するサンプル</title>
<script language="JavaScript">
<!--
function chg(){
    tokuten = 0
    for (i=0; i<num; i++){
        if(document.forms[0].elements[i].checked==true){ // チェックされていたら
            // 文字列を整数に変換して加算
            tokuten = tokuten + parseInt(document.forms[0].elements[i].value)
        }
    }
    document.forms[0].goukei.value = tokuten
}
//-->
</script>
</head>
<body onload="chg()">
<p>チェックボックスの value を加算して表示するサンプルです。</p>
<form name="check-sheet" onsubmit="return false;">
    <table border="1" cellpadding="8">
        <tr>
            <td>質問 1</td>
            <td><input type="checkbox" name="q1" onclick="chg()" value="1"></td>
        </tr>
        <tr>
            <td>質問 2</td>
            <td><input type="checkbox" name="q2" onclick="chg()" value="1"></td>
        </tr>
    </table>
    <p>合計：<input type="text" name="goukei" value="0" size="10" style="text-align:right"></p>
</form>
<script language="JavaScript">
<!--
var num = document.forms[0].length-1
//-->
</script>
</body>

実際に動作するサンプル

– チェックボックスの value を加算して表示するサンプル

チェックされた行の td の値を取得して加算するサンプル ( 要 jQuery ) ———————————————————————-

サンプルコード

<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>チェックされた行の td の値を取得して加算するサンプル</title>
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script language="JavaScript">
<!--
function chg(){
    var num = document.forms[0].length
    tokuten = 0
    for (i=0; i<num; i++){
        if(document.forms[0].elements[i].checked==true){ // チェックされていたら
            // チェックした tr の二番目にある td の文字列を整数に変換して加算
            tokuten = tokuten + parseInt($('tr#q'+(i+1)+' td span').text())
        }
    }
    $("p#goukei span").text(tokuten);
}
//-->
</script>
</head>
<body onload="chg()">
<p>チェックされた行の td の値を取得して加算するサンプルです。</p>
<form name="check-sheet" onsubmit="return false;">
    <table border="1" cellpadding="8">
        <tr id="q1">
            <td>質問 1</td>
            <td><span>1</span> 点</td>
            <td><input type="checkbox" name="q1" onclick="chg()"></td>
        </tr>
        <tr id="q2">
            <td>質問 2</td>
            <td><span>1</span> 点</td>
            <td><input type="checkbox" name="q2" onclick="chg()"></td>
        </tr>
    </table>
    <p id="goukei">合計 : <span>0</span> 点</p>
</form>
</body>