Вопрос

У меня возникли проблемы с получением функции, которая устанавливает все флажки, соответствующие поиску.Кажется, что событие щелчка срабатывает, но ни один флажок не проверяется и функция 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();
}

РЕДАКТИРОВАТЬ
Когда я перешел из div к этикетка тогда мне не пришлось исправлять состояние флажка.А div или у блочного элемента должна быть какая-то проблема.
Я также удалил onclick из *div*s, что означало, что я мог напрямую нацеливаться на флажки и менять их значения идентификаторов только на *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 ?
  });
}
Это было полезно?

Решение

Вместо того, чтобы пытаться использовать событие, чтобы изменить значение флажков, я бы сделал две вещи:

  1. Дать пользователям большую область нажать, используйте label элемент, а не div. label Элементы непосредственно поддерживаются браузерами, вам не нужно ничего делать, чтобы заставить их работать. Есть два способа их использовать:

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

    или

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

    Первый приятный, потому что вам не нужно использовать идентификаторы (которые должны быть совершенно уникальными на странице, поэтому она начинает быть боль); Последнее приятно для разметки ситуаций, когда вы не можете иметь input быть ребенком label для любой причины.

  2. Если вам нужно изменить состояние в коде, измените состояние напрямую, а не пытаясь вызвать событие. Например, если я хочу изменить состояние флажков chk1, Я просто делаю это:

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

    ... или чтобы очистить все флажки в контейнере (полезно для этих «всех» или «нет» ссылок):

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

Другие советы

Только что решил подобную проблему, связанную с обработчиком событий флажка, отображаемым ASP.net, как код js в атрибуте onclick, который я хотел вызвать.Сначала попробовал явно вызвать событие клика jQuery, но через некоторое время понял, что таким способом у меня ничего не получится.Итак, решение, которое сработало для меня:

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

Ваше здоровье.

this.parentNode.click должно быть this.parentNode.click().

this.parentNode.click это просто объект метода. Призывая к этому не будет выстрелить событие щелчка DIV. Вы должны добавить брекеты после click, в противном случае событие не будет огонь.

Чтобы следить за комментарием заостренной, используйте это:

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

Просто замените что-то подобное за любой элемент, который вы пытаетесь зафиксировать событие CLICK.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top