処理の概要
チェックボックスを変更すると、連動して別のチェックボックスにも同じ変更が施される。
処理のフロー：
今回は特に記述なし。
画面イメージ
画像１
画像２
ソースコード
index.html
<body>
<div>
【連動するチェックボックス】<br>
同意する<input type="checkbox" id="interLockingCheck1"><br>
会員になる<input type="checkbox" id="interLockingCheck2"><br>
</div>
<br><br>
<div>
【連動するラジオボタン】<br>
子供<input type="radio" name="interLockingRadio1" value="1"><br>
大人<input type="radio" name="interLockingRadio1" value="2"><br>
<br>
バス運賃（三ノ宮から神戸市北区）：150円<input type="radio" name="interLockingRadio2" value="1"><br>
バス運賃（三ノ宮から神戸市北区）：300円<input type="radio" name="interLockingRadio2" value="2"><br>
</div>
<div id="sumValueOutput"></div>
</body>
main.js
$(function(){
var sumValue = 0;
$("#interLockingCheck1").click(function(){
var lobjCheck = $("#interLockingCheck1").prop("checked");
$("#interLockingCheck2").prop("checked",lobjCheck);
});
$("input[name=interLockingRadio1]").click(function(){
var lobjRadio = $("input[name=interLockingRadio1]:checked").val();
$("input[name=interLockingRadio2]").val([lobjRadio]);
});
$("input[name=interLockingRadio1]").change(function(){
sumValue = 150 * $("input[name=interLockingRadio2]:checked").val();
var lobjMessage = "バス運賃の合計は " + sumValue + " 円です。";
$("#sumValueOutput").html(lobjMessage);
});
});
ポイント
html：
なし
js：
(1)propは引数が1つの場合は、取得。引数が2つの場合は指定の属性を変更出来る
(2)チェックボックスから取得した値はすべて文字列なので、valに入力する場合は変換が必要。
(3)ラジオボタンで選択しているセレクタを選択する場合は「:checked」で選択できる。
(4)ラジオボタンのグルーピングは同じnameを付けること。
参考資料
JavaScript(仕事の現場でサッと使える！デザイン教科書) p60