Javascriptコードでチェックされている場合でも、チェックボックスのクリックイベントをトリガーするにはどうすればよいですか?


80

ページに多くのチェックボックスがあり、すべてのチェックボックスをチェックする[すべて選択]チェックボックスがあります。どういうわけか、すべて選択ボタンでチェックされている/チェックされていない場合でも、チェックボックスのクリックイベントをエミュレートしたいと思います。どうすればいいですか?

回答:


117

jQuery.trigger()メソッドを使用できます。http://api.jquery.com/trigger/を参照してください

例えば:

$('#foo').trigger('click');

13
を呼び出すこともできます$('#foo').click()。これは事実上同じことを行います。
ケビンバブコック

2
純粋なJavaScriptでこれを行う方法は?
ポール

6
が表示されtrigger('click')、現在の値が切り替わります。あなただけ設定し、それを設定したい場合はcheckedtrueに、その後(...)triggerHandlerを呼び出すstackoverflow.com/questions/10268222/...
rogerdpack

1
このような投稿は、サードパーティを使用する必要がある場合、どの程度正確に正しいとマークされますか?彼はjQueryソリューションを求めていませんでした。
Wancieho

@Wancieho質問には「jquery」というタグが付けられています。
マークロビンソン

15

チェックステータスの取得

var checked = $("#selectall").is(":checked");

次に設定用

$("input:checkbox").attr("checked",checked);

9
attr私がprop最近使用しているようにこれを試していませんが、このメソッドはチェックボックスを
オンにするだけ

9

あなたも.change()機能を使うことができます

例えば:

$('form input[type=checkbox]').change(function() { console.log('hello') });

チェックボックスの変更がJavascriptを介して行われる場合、これは私には機能しません。
Flimm

6

gQueryなし

document.getElementById( 'your_box')。onclick();

チェックボックスで特定のクラスを使用しました。

var x = document.getElementsByClassName("box_class");
var i;
for (i = 0; i < x.length; i++) {
    if(x[i].checked) x[i].checked = false;
    else x[i].checked = true;
    x[i].onclick();
   }

6

これも使えますので、どうぞよろしくお願いします。

$(function(){
  $('#elements input[type="checkbox"]').prop("checked", true).trigger("change");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<div id="elements">
  <input type="checkbox" id="item-1" value="1"> Item 1 <br />
  <input type="checkbox" id="item-2" value="2" disabled> Item 2 <br /> 
  <input type="checkbox" id="item-3" value="3" disabled> Item 3 <br />
  <input type="checkbox" id="item-4" value="4" disabled> Item 4 <br />
  <input type="checkbox" id="item-5" value="5"> Item 5
</div>


4

jQueryからのトリガー関数があなたの答えかもしれません。

jQueryのドキュメントによると: .on()またはそのショートカットメソッドの1つが付加されたイベントハンドラーは、対応するイベントが発生したときにトリガーされます。ただし、.trigger()メソッドを使用して手動で起動できます。.trigger()の呼び出しは、イベントがユーザーによって自然にトリガーされた場合と同じ順序でハンドラーを実行します。

したがって、最良の1行ソリューションは次のようになります。

$('.selector_class').trigger('click');

//or

$('#foo').click();

1
  $("#gst_show>input").change(function(){

    var checked = $(this).is(":checked");
    if($("#gst_show>input:checkbox").attr("checked",checked)){
      alert('Checked Successfully');
    }

  });

2
Uはあなたのコードを説明することができ
Yilmazの
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.