処理の概要

チェックボックスを変更すると、連動して別のチェックボックスにも同じ変更が施される。

処理のフロー：

今回は特に記述なし。

画面イメージ

画像１

画像２

ソースコード

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