プロパティに関する attr → prop 変更について

今回は checkbox のチェック状態を一括で On / Off 変更する方法です。
まぁ、「アンケートなどを使用する際にリセットする場合などに必要かな・・・」と気軽に開始してみました。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--

            $(function() {

                var checkAll = false;
                var objArea;

                // All Change Check
                $('#check0').click(function(){
                    checkAll = $(this).prop('checked');
                    $('#check1').prop('checked', checkAll);
                    checkBoxChenge(1, checkAll);
                    $('#check2').prop('checked', checkAll);
                    checkBoxChenge(2, checkAll);
                    $('#check3').prop('checked', checkAll);
                    checkBoxChenge(3, checkAll);
                });

                // Area 1 Change Check
                $('#check1').change(function(){
                    checkBoxChenge(1, $(this).prop('checked'));
                });

                // Area 2 Change Check
                $('#check2').change(function(){
                    checkBoxChenge(2, $(this).prop('checked'));
                });

                // Area 3 Change Check
                $('#check3').change(function(){
                    checkBoxChenge(3, $(this).prop('checked'));
                });

                // Change Data Set
                function checkBoxChenge(areaNo, setFlg){
                    objArea = $('#dispCheck' + areaNo);
                    if (setFlg == true) {
                        objArea.children('input').prop('checked', true);
                    } else {
                        objArea.children('input').prop('checked', false);
                    }
                }

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--
            #dispArea div {
                margin  : 30px;
                padding : 10px;
                border  : solid 1px #000000;
            }
        --></style>
        
    </head>
    <body>

        <div id="selectArea">
            <input type="checkbox" id="check0" /> All Check Cange<br />
            <input type="checkbox" id="check1" /> Area 1 Check Cange<br />
            <input type="checkbox" id="check2" /> Area 2 Check Cange<br />
            <input type="checkbox" id="check3" /> Area 3 Check Cange<br />
        </div>

        <div id="dispArea">

            <div id="dispCheck1">
                <p>Disp Area 1</p>
                <input type="checkbox" value="1_1" /> 1<br />
                <input type="checkbox" value="1_2" /> 2<br />
                <input type="checkbox" value="1_3" /> 3<br />
                <input type="checkbox" value="1_4" /> 4<br />
                <input type="checkbox" value="1_5" /> 5<br />
            </div>

            <div id="dispCheck2">
                <p>Disp Area 2</p>
                <input type="checkbox" value="2_1" /> 1<br />
                <input type="checkbox" value="2_2" /> 2<br />
                <input type="checkbox" value="2_3" /> 3<br />
                <input type="checkbox" value="2_4" /> 4<br />
                <input type="checkbox" value="2_5" /> 5<br />
            </div>

            <div id="dispCheck3">
                <p>Disp Area 3</p>
                <input type="checkbox" value="3_1" /> 1<br />
                <input type="checkbox" value="3_2" /> 2<br />
                <input type="checkbox" value="3_3" /> 3<br />
                <input type="checkbox" value="3_4" /> 4<br />
                <input type="checkbox" value="3_5" /> 5<br />
            </div>

        </div>

    </body>
</html>

sample

これで 上部のチェックボックスに伴って、下部の枠内のチェックボックスが一気に変更されます。

実は、今回は予想以上に時間がかかりました。
難航した原因は “checked” つまりチェック状態の取得です。

これ検索すると結構、下記の方法が検索結果に上がってきます。(2013/09/21 時点)
 checkFlg = $(object).attr(‘checked’);
 ※もちろん他の方法もありますが、検索結果の頻度が一番高いんじゃないかと思います。

でもこれ、間違ってます。
正確には間違っていなかったんですが、あえて間違っていると断言します。

jQuery が v1.9.1 以降の場合の正解は以下の通りです。
 checkFlg = $(object).prop(‘checked’);
 ※変更点は簡単です。attr → prop に変更してください。

どうも jQuery が v1.6 の時に プロパティを取得・設定するには prop を使用すると決めていたみたいですね・・・
ただ、いきなり? attr が使用できなくなるのは問題ということで、v1.6.1 の時に後方互換性が追加されました。
そして、v1.9.1 にて改めてプロパティの取得・設定に attr が使用できなくなったという経緯の様です。

どうせ止めるなら、v1.6 でキッパリ止めといてよ・・・
私が苦労しただけで、他の人には当然の事だったのかなぁ・・・

影響力のない当ブログですが、同じ個所で困った方の手助けになれば幸いです。

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です