月別アーカイブ: 2013年9月

Value を jQuery で変更した際の Change イベント

今回は jQuery で Value 値を変更したときにイベントを発生する方法の調査です。
まぁ、前回「プロパティに関する attr → prop 変更について」の反省を兼ねた内容です。

前回の内容はこんな流れでした。
 1.親となる checkbox のチェック状態を変更する。
 2.子となる checkbox のチェック状態を親と同じ状態に切り替える。
 3.孫となる checkbox のチェック状態を子と同じ状態に切り替える。

ですが、できませんでした。
「親」から「子」の工程は問題なく動作するんですが、「子」から「孫」の工程が動作しません。

前回は特に重要視しなくて、別途「孫」の checkbox を変更する function を実行したんですが・・・
考えれば考えるほど「無駄な処理だなぁ」との考えに至ったため「リベンジ」を行います。

<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).change();
                    $('#check2').prop('checked', checkAll).change();
                    $('#check3').prop('checked', checkAll).change();
                });

                // 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" /> Parent Check Cange<br />
        </div>

        <div id="dispArea">

            <div id="dispCheck0">
                <p>Child Area</p>
                <input type="checkbox" id="check1" /> Grandchild Area 1<br />
                <input type="checkbox" id="check2" /> Grandchild Area 2<br />
                <input type="checkbox" id="check3" /> Grandchild Area 3<br />
            </div>

            <div id="dispCheck1">
                <p>Grandchild 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 />
            </div>

            <div id="dispCheck2">
                <p>Grandchild 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 />
            </div>

            <div id="dispCheck3">
                <p>Grandchild 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 />
            </div>

        </div>

    </body>
</html>

sample

如何でしょう。 子の checkbox の変更が、そのまま孫の checkbox に影響しました。

原因は jQuery で 子の checkbox を変更したことでした。
どうも、jQuery で Value 値を変更しても Change イベントは実行されないようです。

対策として、処理の最後に「.change()」をつけることで解決します。
意味としては「対象に対して Change イベントを実行させる」ということですね。
もちろん、Change 以外にも Click など、同様の方法で実行させることができました。

まぁ、これも今までに何度か書いた「個人的にもっと早く知っておきたかった」内容ですね。
自己満足とは言え、心の中のモヤモヤが晴れてスッキリしました。

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

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

プロパティに関する 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 人がこの 投稿 は役に立ったと言っています。

要素の順番を取得する

前回に引き続き、個人的にはもっと早く知っておきたかった内容です。

複数のタグを設置した場合、処理を実行したタグが何番目のタグかを調べることができます。

<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 indexNo = 0;
                $('#dispArea input[type=button]').click(function(){
                    // Alert Click Index
                    indexNo = $('#dispArea input[type=button]').index(this);
                    alert('It is No. ' + indexNo + ' that you clicked.');
                });

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--

        --></style>
        
    </head>
    <body>

        <div id="dispArea">

            <input type="button" value="Click Me! (Index 0)" />
            <br />
            <input type="button" value="Click Me! (Index 1)" />
            <br />
            <input type="button" value="Click Me! (Index 2)" />
            <br />
            <input type="button" value="Click Me! (Index 3)" />
            <br />
            <input type="button" value="Click Me! (Index 4)" />
            <br />
            <input type="button" value="Click Me! (Index 5)" />

        </div>

    </body>
</html>

sample

これで選択したボタンが、何番目のボタンかを知ることができます。
index 番号を取得するため、最初の番号は 0 から開始されます。

今までは、タグに ID を振っていたんですが、this と index の組み合わせを使用することで
今後はお手軽に対応できそうです。

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

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

一度だけ命令を実行する

たとえば button などの object に対して、処理を追加する場合、
通常は bind で追加して、不要になった時点で unbind で処理を削除します。

ですが、最初の一度だけしか実行しない処理などは、 bind, unbind は冗長だなといつも思ってました。
今回は一度だけ実行する時に便利な one() についてです。

<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() {

                // It performs only once.
                $('#execOne').one('click', function(){
                    alert('It performs only once.');
                });

                // It performs any number of times.
                $('#execAll').click(function(){
                    alert('It performs any number of times.');
                });

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--

        --></style>
        
    </head>
    <body>

        <div id="buttonArea">

            <input type="button" id="execOne" value="press here. (It performs only once.)" />
            <br />
            <input type="button" id="execAll" value="press here. (It performs any number of times.)" />

        </div>

    </body>
</html>

sample

これで最初にクリックしたときだけ指定した処理を実行します。

正直使う機会はあまりないのかと思います。
ですが個人的にはもっと早く知っておきたかった内容ですね。

一連の流れが完了した後、unbind を忘れて大変なことになったことが・・・
今後は各ボタンで一回ずつの処理や、初回だけヘルプ表示など、色々使用していきたいと思います。

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

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