0

検索に一致したすべてのチェックボックスをクリックする関数を取得するのに問題があります。クリックイベントが発生するようですが、チェックボックスがチェックされたりmyFunc()呼び出されたりすることはありません。

各チェックボックスを手動でクリックすると完全に機能しますが、私のユーザーではなく、40以上のチェックボックスでそれを実行したいのは誰ですか。
入力チェックボックスに直接ではなく、div-onclick を使用する理由を不思議に思うかもしれません。これは、ユーザーが小さなチェックボックスよりもクリックできる領域を大きくしたいからです。

特定の属性値に一致する複数のチェックボックスを選択するための単一のハイパーリンクをユーザーに提供したいと考えています。

HTML

<div id="container">
<a href="#" onclick="clickAndCheckAllMatch('search for this text');return false;">some text</a>
<div id="*actual_ID*" onclick="myFunc(a, b, c, d);">
  <input type="checkbox" id="book-*actual_ID*" onclick="this.parentNode.click;return false;">
</div>
</div>

JS

function myFunc(a, b, c, d) {
  // does stuff
}
function clickAndCheckAllMatch(value) {
  $('div[onclick*='+value+']').each(function(idx,e){
  $('book-'+this.id).click();
}

EDIT divからlabel
に変更したとき、チェックボックスの状態を修正する必要はありませんでした。divまたは block-element には何らかの問題があるはずです。また、 div から onclick を削除しました。これは、チェックボックスを直接ターゲットにして、それらの ID 値をactual_IDだけに変更できることを意味しました。

function clickAndCheckAllMatch(value) {
  $('input[onclick*='+value+']').each(function(idx,e){
    // e == this
    $(this)[0].click();
    if ($(this).attr('disabled')) {
      //do nothing
    } else {
      if ($(this).attr('checked')) {
        //do nothing
      } else {
        $(this)[0].click(); // only one checkbox per ID
      }
    }
  });
}
function CheckAll() {
  $('#container input[type=checkbox]:not(:checked)').each(function(idx,e){
    $(this).click(); // notice the difference ?
  });
}
4

4 に答える 4

2

トリガーしたかったonclick属性のjsコードのようなASP.netによってレンダリングされたチェックボックスのイベントハンドラーに関連するこのような問題を解決しました。最初はjQueryクリックイベントを明示的に呼び出してみましたが、しばらくすると、この方法では成功しないことに気付きました。だから私のために働いた解決策は次のとおりです：

someOtherObject.click(eval($('input').attr('onclick')));

乾杯。

于 2011-03-18T16:19:00.163 に答える
1

this.parentNode.clickである必要がありますthis.parentNode.click()。

this.parentNode.click単なるメソッドオブジェクトです。それを呼び出しても、divのクリックイベントは発生しません。の後に中括弧を追加する必要がありますclick。そうしないと、イベントは発生しません。

于 2010-09-29T13:40:46.490 に答える
1

イベントを使用してチェックボックスの値を変更しようとするのではなく、次の 2 つのことを行います。

  1. ユーザーがクリックできる広い領域を提供するには、labelではなく要素を使用しますdiv。label要素はブラウザーによって直接サポートされているため、機能させるために何もする必要はありません。それらを使用するには、次の 2 つの方法があります。

    <label><input type='checkbox'>Foo</label>

    また

    <input type='checkbox' id='chk1'><label for='chk1'>Foo</label>

    前者は ID を使用する必要がないので便利です (ID はページ上で完全に一意である必要があるため、面倒になり始めます)。後者は、何らかの理由inputで を の子にすることができないマークアップの状況に適しています。label

  2. コードで状態を変更する必要がある場合は、イベントをトリガーするのではなく、状態を直接変更してください。たとえば、チェックボックスの状態を変更したい場合は、次のようにしますchk1。

    $('#chk1').attr("checked", true); // or false, of course

    ...またはコンテナ内のすべてのチェックボックスをクリアするには (これらの「すべて」または「なし」のリンクに役立ちます):

    $('#container input[type=checkbox]').attr("checked", false); // or true, of course
于 2010-09-29T13:44:13.430 に答える
0

Pointy のコメントをフォローアップするには、これを使用します。

$(document).ready(function(){
  $('.theAnchorTagClass').click(function(){
    //Code to check all boxes here or do whatever else you need...
  });
});

クリックイベントをキャプチャしようとしている要素をそのようなものに置き換えるだけです。

于 2010-09-29T13:41:23.233 に答える