11

次のコードを検討してください ( http://jsfiddle.net/FW36F/1/ ):

<input type="checkbox" onchange="alert(this.checked)">
<button onclick="document.getElementsByTagName('input')[0].checked=!document.getElementsByTagName('input')[0].checked;">toggle</button>

チェックボックスをクリックすると、チェックされているかどうかを知らせるアラートが表示されます。偉大な。ただし、トグル ボタンをクリックすると、チェックボックスはチェック状態に変わりますが、onchange イベントは発生しません。

基本的に、チェックボックスの onchange は、チェックボックスが JavaScript によって変更された場合ではなく、ユーザーが実際にチェックボックスをクリックした場合にのみ発生します。これは、IE、FF、および Chrome に当てはまります。この動作も仕様どおりのようです。

ただし、何らかの理由でチェックボックスのチェック状態が変化した場合、何らかのイベントを発生させる必要があります。これは可能ですか？

そうそう、jQuery は許可されていません。また、setTimeout/setInterval ベースのソリューションも使用しないでください...

更新:また、上記のコードは説明のみを目的としていることを明確にする必要があります。実際のコードでは、チェックボックスを切り替えるだけでなく、チェックボックスの状態がチェックされているかチェックされていないかを確認する必要があります。おそらく、これはそれを説明するためのより良いコードになるでしょう:

<input type="checkbox" onchange="alert(this.checked)">
<button onclick="document.getElementsByTagName('input')[0].checked=true;">check</button> 
<button onclick="document.getElementsByTagName('input')[0].checked=false;">un check</button>

さらに、完全には制御できない他の領域にコードが存在する可能性があり、単純な .checked=true/false を実行する可能性があります。これも確認したいと考えています。

4

4 に答える 4

10

更新しても、既存の回答は問題なく機能します。賢く、必要がなければクリックを呼び出さないでください。また、インラインJSは使用しないでください。10年前は大丈夫でした。

<input type="checkbox" onchange="alert(this.checked)">
<button id='check'>check</button> 
<button id='uncheck'>uncheck</button>

document.getElementById('check').onclick = function() {
   if (!this.checked) {
      this.click();
   }
}

スクリプトが値を変更するときに変更する必要がある場合は、Firefoxでhttps://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/watchを使用できます。

ここの例http://jsfiddle.net/PPuZ8/

// In FF $ is a shortcut for document.getElementById
// It doesn't fire when set from the UI, you have to use a regular handler for that
$('cb').watch("checked", function(){
   console.log('Checked state changed from script', arguments);
   return true;
});

IEの場合は、http：//msdn.microsoft.com/en-us/library/ie/ms536956（v = vs.85）.aspxを使用できますonpropertychange （ リマインダーを提供してくれたjivingsに感謝します）

例： http： //jsfiddle.net/PPuZ8/1/

document.getElementById('cb').onpropertychange = function() {    
    if (event.propertyName == 'checked') {
       console.log('Checked state changed onproperty change');    
    }
};

他のブラウザの場合は、setInterval/setTimeoutを使用してポーリングする必要があります

于 2012-05-17T14:46:09.513 に答える
2

トグルボタンで実際にチェックボックスをクリックしてもらいます。

<input type="checkbox" onchange="alert(this.checked)">
<button onclick="document.getElementsByTagName('input')[0].click()">
  toggle
</button>

チェックボックスを変更して新しい位置を通知する場合は、チェックボックスの値を変更するためのグローバルメソッドを作成し、プロキシとして処理します。

<script>
function toggleCB( state ) {
  var cb = document.getElementById("cb");
  arguments.length ? cb.checked = state : cb.click() ;
  return cb.checked;
}
</script>
<input id="cb" type="checkbox" />
<input type="button" onClick="alert( toggleCB(true) )" value="Check" />
<input type="button" onClick="alert( toggleCB(false) )" value="Uncheck" />
<input type="button" onClick="alert( toggleCB() )" value="Toggle" />​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

これで、チェックボックスを設定または切り替えるたびに、チェックされた状態に戻ります。

最後に、属性の使用を避けonClick、代わりにJavaScript内からクリックイベントをバインドします。

于 2012-05-17T14:38:23.677 に答える
1

使用するclick()

<button onclick="document.getElementsByTagName('input')[0].checked=!document.getElementsByTagName('input')[0].click();">toggle</button>
于 2012-05-17T14:38:15.223 に答える
-1

oninput は、処理する必要があるイベントです... https://developer.mozilla.org/en/DOM/DOM_event_reference/input

于 2012-05-17T14:46:54.017 に答える