2

チェックボックスがオンまたはオフのときに関数を実行したい。ただし、約70個のチェックボックスがあります。それらはすべてdiv内にあります。変更されたコマンドのいずれかに反応する1つのコマンドを作成するにはどうすればよいですか？

4

2 に答える 2

2

イベントがバブルアップするので、onchangeハンドラーをdivにアタッチしてe.target、変更されたチェックボックスを取得するために使用できます。これの簡単な例を次に示します。

HTML：

<div id="checkbox-container">
    <input type="checkbox" name="one" />
    <input type="checkbox" name="two" />
    <input type="checkbox" name="three" />
    <input type="checkbox" name="pizza" />
</div>

<strong> Javascript：

document.getElementById('checkbox-container').onchange = function(e){
    alert(e.target.name);
}​

そしてこれがJSFiddleです

于 2012-06-13T00:13:42.097 に答える
1

ascii-timeの回答に基づいて、イベント委任を使用できます。ただし、変更イベントはすべてのブラウザーでバブルするわけではなく、IEイベントモデルもサポートする必要があることに注意してください。したがって、クリックイベントを使用して、不要な要素を除外します（または代替応答を追加します）。

<div id="checkbox-container">
     <input type="checkbox" name="one">
     <input type="checkbox" name="two">
     <input type="checkbox" name="three">
     <input type="checkbox" name="pizza">
</div>

<script type="text/javascript">

(function() {

  var container = document.getElementById('checkbox-container');

  if (container) {
    container.onclick = function(evt) {
      evt = evt || window.event;
      var el = evt.target || evt.srcElement;

      if (el && el.nodeType == 1 && el.type == 'checkbox') {
        alert(el.name + ' is ' + (el.checked? '':'not') + ' checked'); 
      }
    }
  }
}())

</script>

スクリプトはcontainer要素の下にある必要があることに注意してください。クロージングボディタグの直前が良いです。

于 2012-06-13T00:32:24.223 に答える