JQuery Click Action não aciona o atributo OnClick

Question

Estou tendo problemas para obter uma função que clique em todas as caixas de seleção correspondentes. O evento de clique parece disparar, mas nenhuma caixa de seleção é verificada nem o myfunc () é chamado.

Funciona perfeitamente ao clicar em cada caixa de seleção manualmente, mas quem deseja fazer isso com mais de 40 caixas de seleção - não meus usuários.
Você pode se perguntar por que eu uso um Div-Onclick em vez de diretamente na caixa de seleção de entrada. Isso é porque eu quero dar aos meus usuários um maior área para clicar em uma pequena caixa de seleção.

Quero fornecer aos meus usuários um único hiperlink para selecionar várias caixas de seleção que correspondem a determinados valor (s) do atributo.

Eu preciso de uma solução rápida, pois estou sem tempo.

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();
}

EDITAR
Quando eu mudei de div para etiqueta Então eu não precisei corrigir o estado da caixa de seleção. UMA div ou elemento de bloco deve ter algum problema lá.
Também removi o OnClick dos *div *s, o que significava que eu era capaz de atingir as caixas de seleção diretamente e poderia alterar seus valores de identificação para apenas o *real_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 ?
  });
}

Answer 1

Em vez de tentar usar o evento para alterar o valor da caixa de seleção, eu faria duas coisas:

1. Para dar aos usuários uma grande área para clicar, use um label elemento, não um div. label Os elementos são diretamente suportados pelos navegadores, você não precisa fazer nada para fazê -los funcionar. Existem duas maneiras de usá -los:

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

   ou

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

   O primeiro é bom porque você não precisa usar IDs (que precisam ser totalmente únicos na página, por isso começa a ser uma dor); o último é bom para situações de marcação em que você não pode ter o input ser um filho do label Por qualquer motivo.

2. Se você precisar alterar o estado no código, altere o estado diretamente, em vez de tentar acionar um evento. Por exemplo, se eu quiser mudar o estado da caixa de seleção chk1, Eu só faço isso:

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

   ... ou para limpar todas as caixas de seleção em um contêiner (útil para aqueles links "todos" ou "nenhum"):

   $('#container input[type=checkbox]').attr("checked", false); // or true, of course
   

Answer 2

Acabei de resolver um problema como esse, relacionado ao manipulador de eventos da caixa de seleção renderizado pelo código JS do ASP.NET no atributo onclick, que eu queria acionar. Tentei primeiro chamar explicitamente o evento de cliques do jQuery, mas depois de um tempo percebi que não vou ter sucesso dessa maneira. Então, a solução que funcionou para mim é:

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

Felicidades.

Answer 3

this.parentNode.click deveria estar this.parentNode.click().

this.parentNode.click é apenas o objeto de método. Chamá -lo não disparará o evento de clique da div. Você deve adicionar o aparelho depois click, caso contrário, o evento não disparará.

Answer 4

Para acompanhar o comentário de Pointy, use isto:

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

Basta substituir algo assim por qualquer elemento que você esteja tentando capturar o evento de cliques.