web-dev-qa-db-ja.com

チェックボックスチェックイベントリスナー

最近、ChromeプラグインAPIで作業しており、Webサイトを管理するのが楽になるプラグインを開発したいと考えています。

今、私がしたいことは、特定のチェックボックスがチェックされたときにイベントを発生させることです。このウェブサイトは私のものではないので、コードを変更できないため、Chrome APIを使用しています。主な問題の1つは、IDがあるのではなく、名前があることです。 「名前」の特定のチェックボックスがチェックされたら関数を起動できるかどうか疑問に思っていました。

javascripthtmlgoogle-chromegoogle-chrome-extensiondom-events
46
Oliver Kucharzewski

このマークアップを使用していると仮定します。

<input type="checkbox" name="checkbox">

JQueryなし

JQueryのような querySelector を使用します。

var checkbox = document.querySelector("input[name=checkbox]");

checkbox.addEventListener( 'change', function() {
    if(this.checked) {
        // Checkbox is checked..
    } else {
        // Checkbox is not checked..
    }
});

JQueryを使用

$('input[name=checkbox]').change(function(){
    if($(this).is(':checked')) {
        // Checkbox is checked..
    } else {
        // Checkbox is not checked..
    }
});
82
thordarson

OPにjQueryタグが表示されないため、ここにjavascriptのみのオプションがあります。

document.addEventListener("DOMContentLoaded", function (event) {
    var _selector = document.querySelector('input[name=myCheckbox]');
    _selector.addEventListener('change', function (event) {
        if (_selector.checked) {
            // do something if checked
        } else {
            // do something else otherwise
        }
    });
});

[〜＃〜] jsfiddle [〜＃〜]を参照してください

41
JFK

HTMLに次のようなチェックボックスがある場合：

<input id="conducted" type = "checkbox" name="party" value="0">

javascriptを使用してこのチェックボックスにEventListenerを追加するには、関連付けられたjsファイルで次のようにします。

checkbox = document.getElementById('conducted');

checkbox.addEventListener('change', e => {

    if(e.target.checked){
        //do something
    }

});
0
SabU