Блог

У меня есть функция Javascript / Jquery, которая управляет группами флажков.

Флажки создаются в форме PHP из вызова базы данных, поэтому я итеративно просматриваю набор записей и создаю флажки в html.

Для каждого флажка я присваиваю ему класс «checkboxgroup» числовой идентификатор для создания группы записей «нравится». В итоге я получаю несколько таких флажков:

     <tr class="tablebody">
        <td><input name="contactresolveid2048" id="contactresolveid2048" type="checkbox" class="checkboxgroup0"/></td>
        <td>Davidamp;nbsp;Smith</td>
    </tr>
    <tr class="tablebody">
        <td><input name="contactresolveid19145" id="contactresolveid19145" type="checkbox" class="checkboxgroup0"/></td>
        <td>grahamamp;nbsp;Foots</td>
    </tr>
    <tr class="tablebody">
        <td><input name="contactresolveid19146" id="contactresolveid19146" type="checkbox" class="checkboxgroup0"/></td>
        <td>Tomamp;nbsp;Silly</td>
    </tr>
 

Как вы можете видеть, эти 3 флажка имеют класс «checkboxgroup0»

Следующая функция обнаруживает щелчок по ЛЮБОЙ из групп флажков в форме (которых может быть много) и снимает все флажки (принадлежащие к одной и той же группе), которые не являются щелкнутыми.

     $('[class^="checkboxgroup"]').click(function() {
        var thisClass = $(this).attr('class');
        var $checkboxgroup = $('input.' thisClass);
        $checkboxgroup.filter(':checked').not(this).prop('checked', false);
    });
 

В большинстве случаев это работает нормально, когда единственным классом является «checkboxgroup0».

Однако при проверке jQuery validate добавляет класс «допустимый» или «ошибка» в список классов всех полей, которые прошли или не прошли проверку, поэтому я могу получить .attr(класс) «checkboxgroup0 допустимо».

Мой вопрос заключается в следующем:

Как мне вернуть полное имя класса частично выбранного класса БЕЗ каких-либо посторонних классов?

С помощью селектора $(‘[класс^=»контрольная группа»]’) Мне нужна вся часть этого селектора «checkboxgroup0» и никакие другие классы, которые могут быть ему назначены.

Эта проблема, с которой вы столкнулись, является одной из причин, по которой использование дополнительных атрибутов идентификатора/класса не рекомендуется.

Чтобы обойти эту проблему с вашим JS, вы можете вместо этого использовать один и тот же класс для каждого флажка. Затем вы можете сгруппировать их по data атрибуту. Использование этого метода означает, что количество классов в элементе или их положение в строке class атрибута не имеет значения.

Попробуйте этот пример:

 $('.checkboxgroup').click(function() {
  let $this = $(this);
  let $group = $(`.checkboxgroup[data-group="${$this.data('group')}"]`);
  $group.not(this).prop('checked', false);
}); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr class="tablebody">
    <td><input name="contactresolveid2048" id="contactresolveid2048" type="checkbox" class="checkboxgroup" data-group="0" /></td>
    <td><label for="contactresolveid2048">David Smith</label></td>
  </tr>
  <tr class="tablebody">
    <td><input name="contactresolveid19145" id="contactresolveid19145" type="checkbox" class="checkboxgroup" data-group="0" /></td>
    <td><label for="contactresolveid19145">graham Foots</label></td>
  </tr>
  <tr class="tablebody">
    <td><input name="contactresolveid19146" id="contactresolveid19146" type="checkbox" class="checkboxgroup" data-group="0" /></td>
    <td><label for="contactresolveid19146">Tom Silly</label></td>
  </tr>
</table> 

Однако стоит отметить, что то, что вы пытаетесь сделать, может быть гораздо лучше достигнуто только с помощью HTML. Просто используйте radio входные данные и дайте им всем один и тот же name атрибут, тогда вы получите поведение, которое пытаетесь создать бесплатно:

 <table>
  <tr class="tablebody">
    <td><input name="contactresolve" id="contactresolveid2048" type="radio" /></td>
    <td><label for="contactresolveid2048">David Smith</label></td>
  </tr>
  <tr class="tablebody">
    <td><input name="contactresolve" id="contactresolveid19145" type="radio" /></td>
    <td><label for="contactresolveid19145">graham Foots</label></td>
  </tr>
  <tr class="tablebody">
    <td><input name="contactresolve" id="contactresolveid19146" type="radio" /></td>
    <td><label for="contactresolveid19146">Tom Silly</label></td>
  </tr>
</table>