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

だるかぶ

サンダルでスーパーカブ乗りの『だるかぶ』です！
ご訪問ありがとうございます。ゆっくりしていってね。（本ページは広告を含みます。）

チェックシートで合計点を計算する JavaScript サンプルを書いてみました。

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

実際に動作するサンプル

https://codepen.io/darucub/pen/ByKzwjY

サンプルコード

<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 onSubmit="return false;">
    <table border="1" cellpadding="8">
        <tr>
            <td>質問 1</td>
            <td><input type="checkbox" onClick="chg()" value=1></td>
        </tr>
        <tr>
            <td>質問 2</td>
            <td><input type="checkbox" onClick="chg()" value=1></td>
        </tr>
    </table>
    <p>合計：<input type="text" value="0" size="10" style="text-align:right"></p>
</form>
<script language="JavaScript">
<!--
var num = document.forms[0].length-1
//-->
</script>
</body>
</html>

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

実際に動作するサンプル

https://codepen.io/darucub/pen/KwzMXNJ

サンプルコード

<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 onSubmit="return false;">
    <table border="1" cellpadding="8">
        <tr>
            <td>質問 1</td>
            <td><span>1</span> 点</td>
            <td><input type="checkbox" onClick="chg()"></td>
        </tr>
        <tr>
            <td>質問 2</td>
            <td><span>1</span> 点</td>
            <td><input type="checkbox" onClick="chg()"></td>
        </tr>
    </table>
    <p>合計 : <span>0</span> 点</p>
</form>
</body>
</html>

現場からは以上です。それでは、またッ！！！

だるかぶ

最後までお読みいただきありがとうございます！ スキ・コメント・シェア・フォローなどで応援いただけると『だるかぶ』のやる気がアップします！

記事内容の修正について 記載している内容は記事執筆時の情報です。 できるだけ最新情報を掲載するようにしていますが、情報が間違っている場合は「コメント」でご指摘いただけるとありがたいです。