[ JavaScript ] チェックボックスの value を加算して表示するサンプル
- 2018.12.12
- Support
ざっくりですが使い方。
ちょっと仕様違いますが大まかなイメージ
https://bowz.info/wp-content/uploads/2011/08/js-01.html
ヘッダーに以下を入れる
<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>
HTMLに以下を追加
黄背景:質問の順番に合わせた数値を入力
赤背景:加算したい数値を入力
<td><input type=”radio” name=”q1” onClick=”chg()” value=0>0 <input type=”radio” name=”q1” onClick=”chg()” value=1>1 <input type=”radio” name=”q1” onClick=”chg()” value=2>2 <input type=”radio” name=”q1” onClick=”chg()” value=3>3 </td>
<p>チェックボックスの value を加算して表示するサンプルです。</p>
<form name=”check-sheet” onSubmit=”return false;”>
<table class=”tb04″>
<tr>
<th>質問 1 内容が入ります内容が入ります内容が入ります内容が入ります内容が入ります内容が入ります内容が入ります内容が入ります内容が入ります</th>
<td><input type=”radio” name=”q1″ onClick=”chg()” value=0>0 <input type=”radio” name=”q1″ onClick=”chg()” value=1>1 <input type=”radio” name=”q1″ onClick=”chg()” value=2>2 <input type=”radio” name=”q1″ onClick=”chg()” value=3>3 </td>
</tr>
<tr>
<th>質問 2 内容が入ります内容が入ります内容が入ります内容が入ります内容が入ります内容が入ります内容が入ります内容が入ります内容が入ります</th>
<td><input type=”radio” name=”q2″ onClick=”chg()” value=0>0 <input type=”radio” name=”q2″ onClick=”chg()” value=1>1 <input type=”radio” name=”q2″ onClick=”chg()” value=2>2 <input type=”radio” name=”q2″ onClick=”chg()” value=3>3 </td>
</tr>
<tr>
<th>質問 3 内容が入ります内容が入ります内容が入ります内容が入ります内容が入ります内容が入ります内容が入ります内容が入ります内容が入ります</th>
<td><input type=”radio” name=”q3″ onClick=”chg()” value=0>0 <input type=”radio” name=”q3″ onClick=”chg()” value=1>1 <input type=”radio” name=”q3″ onClick=”chg()” value=2>2 <input type=”radio” name=”q3″ onClick=”chg()” value=3>3 </td>
</tr>
<tr>
<th>合計</th>
<td><p><input type=”text” name=”goukei” value=”0″ size=”10″ style=”text-align:right”></p></td>
</tr>
</table></form>
<script language=”JavaScript”>
<!–
var num = document.forms[0].length-1
//–>
</script>
元ネタサイト https://bowz.info/3219