[JQuery]checkboxのcheckedプロパティを変更してもchangeイベントは発火しない

checkboxをprop(‘checked’, true)で値を変更してもchangeイベントが発火しないのでメモ

環境

  • JQuery2.0.3

checkedプロパティを変更

見たら分かるんだけど、期待する動作はコンソールに「checkbox change!!」と出力されること。

しかし、どうもcheckedプロパティを変更してもchangeイベントは発火しないよう。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
</head>
<body>
<form>
    <input id="checkbox1" type="checkbox" name="example" value="hoge">
    <label for="checkbox1">Sample CheckBox</label>
</form>

<script type="text/javascript">
    (function() {
        $('input[name="example"]').on('change', function(e) {
            console.log('checkbox change!!');
        });

        $('input[name="example"]').prop('checked', true);
    })();
</script>
</body>
</html>

triggerでイベントを発行

なのでtriggerでイベントハンドラの呼び出しをしてあげる必要がある。

1
2
3
4
5
6
7
8
9

<script type="text/javascript">
    (function() {
        $('input[name="example"]').on('change', function(e) {
            console.log('checkbox change!!');
        });

        $('input[name="example"]').prop('checked', true).trigger('change');
    })();
</script>

イベントの発行元を判断する

trigger経由で発行されたイベントの場合のみなんらかの処理がしたい時がある。

そんな時は以下のようにしておく。

1
2
3
4
5
6
7
8
9
10
11
12

<script type="text/javascript">
    (function() {
        $('input[name="example"]').on('change', function(e, param) {
            if (param === true) {
                // 何らかの処理
            }
            console.log('checkbox change!!');
        });

        $('input[name="example"]').prop('checked', true).trigger("change", [true]);
    })();
</script>

ちなみにラジオボタンでも同じです。 javascript好きになってきた今日この頃。

Comments