Получить выбранный переключатель на выбранный в функции в JQuery

Question

У меня есть следующая разметка:

    <div class="secondary-filter" onclick="searchByFilter()">
        <ul class="secondary-filter__list">
            <li class="secondary-filter__list-item">
                <input type="radio" id="secondaryFilter-all" name="secondaryFilter" value="All">
                <label for="secondaryFilter-all">All</label>
            </li>

            <li class="secondary-filter__list-item">
                <input type="radio" id="secondaryFilter-marked" name="secondaryFilter" value="Marked">
                <label for="secondaryFilter-quoted">Marked</label>
            </li>

            <li class="secondary-filter__list-item">
                <input type="radio" id="secondaryFilter-pending" name="secondaryFilter" value="Pending">
                <label for="secondaryFilter-unquoted">Pending</label>
            </li>
        </ul>
    </div>

Как я могу получить метку отмеченного переключателя в следующей функции?

function searchByFilter() {
    var x = $("input[name='secondaryFilter']").find('input:checked');

    console.log(x.val());
}

Я пытаюсь это ..но это не работаетПожалуйста, помогите.

Answer 1

Для этого подключите обработчик событий change непосредственно к элементам radio.Затем вы можете получить $(this).val() от него, когда произойдет событие.Вы также можете использовать next().text(), чтобы получить значение, показанное в label, хотя, учитывая, что значение радиосвязи и innerText метки совпадают, это кажется немного избыточным.

Также обратите внимание, что for атрибуты label элементов должны соответствовать id целевого radio, поэтому я также исправил HTML-код.

$('.secondary-filter :radio').on('change', function() {
  var $radio = $(this);
  var $label = $radio.next();
  console.log(`value: ${$radio.val()}, label: ${$label.text()}`);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="secondary-filter">
  <ul class="secondary-filter__list">
    <li class="secondary-filter__list-item">
      <input type="radio" id="secondaryFilter-all" name="secondaryFilter" value="All">
      <label for="secondaryFilter-all">All</label>
    </li>

    <li class="secondary-filter__list-item">
      <input type="radio" id="secondaryFilter-marked" name="secondaryFilter" value="Marked">
      <label for="secondaryFilter-marked">Marked</label>
    </li>

    <li class="secondary-filter__list-item">
      <input type="radio" id="secondaryFilter-pending" name="secondaryFilter" value="Pending">
      <label for="secondaryFilter-pending">Pending</label>
    </li>
  </ul>
</div>

Answer 2

Использование

input[name='secondaryFilter']:checked" ,'.secondary-filter'

Будет проверено наличие переключателя в классе div

function searchByFilter() {
    var x = $("input[name='secondaryFilter']:checked" ,'.secondary-filter')
   console.log(x.val())
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="secondary-filter" onclick="searchByFilter()">
        <ul class="secondary-filter__list">
            <li class="secondary-filter__list-item">
                <input type="radio" id="secondaryFilter-all" name="secondaryFilter" value="All">
                <label for="secondaryFilter-all">All</label>
            </li>

            <li class="secondary-filter__list-item">
                <input type="radio" id="secondaryFilter-marked" name="secondaryFilter" value="Marked">
                <label for="secondaryFilter-quoted">Marked</label>
            </li>

            <li class="secondary-filter__list-item">
                <input type="radio" id="secondaryFilter-pending" name="secondaryFilter" value="Pending">
                <label for="secondaryFilter-unquoted">Pending</label>
            </li>
        </ul>
    </div>

Answer 3

Ваш $("input[name='secondaryFilter']") создает объект jQuery, если <input> элементы, но .find ищет только через потомков - у входных элементов нет потомков, скорее вы хотите получить соответствующий <input> в текущей коллекции.

Вы также должны присоединить прослушиватель событий, используя Javascript, а не в атрибуте HTML.Прослушивая события change, вы будете иметь события, которые срабатывают только при изменении одного из входов, а не при щелчке в любом месте контейнера.

Также, вероятно, лучше всего иметь label nextдля каждого входа его атрибут for совпадает с id ввода - таким образом, при нажатии на метку, вход будет проверен - например, измените

<input type="radio" id="secondaryFilter-marked" name="secondaryFilter" value="Marked">
<label for="secondaryFilter-quoted">Marked</label>

на

<input type="radio" id="secondaryFilter-marked" name="secondaryFilter" value="Marked">
<label for="secondaryFilter-marked">Marked</label>
                            ^^^^^^

Хотя вместо этого можно использовать .filter, чтобы найти элемент в текущем объекте jQuery, соответствующий условию:

$("input[name='secondaryFilter']").on('change', function() {
  var x = $("input[name='secondaryFilter']").filter('input:checked');
  console.log(x.val());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="secondary-filter">
  <ul class="secondary-filter__list">
    <li class="secondary-filter__list-item">
      <input type="radio" id="secondaryFilter-all" name="secondaryFilter" value="All">
      <label for="secondaryFilter-all">All</label>
    </li>

    <li class="secondary-filter__list-item">
      <input type="radio" id="secondaryFilter-marked" name="secondaryFilter" value="Marked">
      <label for="secondaryFilter-marked">Marked</label>
    </li>

    <li class="secondary-filter__list-item">
      <input type="radio" id="secondaryFilter-pending" name="secondaryFilter" value="Pending">
      <label for="secondaryFilter-pending">Pending</label>
    </li>
  </ul>
</div>

Было бы проще просто вставить :checked в первую строку выбора:

const checkedInput = $("input[name='secondaryFilter']:checked");

$("input[name='secondaryFilter']").on('change', function() {
  var x = $("input[name='secondaryFilter']:checked");
  console.log(x.val());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="secondary-filter">
  <ul class="secondary-filter__list">
    <li class="secondary-filter__list-item">
      <input type="radio" id="secondaryFilter-all" name="secondaryFilter" value="All">
      <label for="secondaryFilter-all">All</label>
    </li>

    <li class="secondary-filter__list-item">
      <input type="radio" id="secondaryFilter-marked" name="secondaryFilter" value="Marked">
      <label for="secondaryFilter-marked">Marked</label>
    </li>

    <li class="secondary-filter__list-item">
      <input type="radio" id="secondaryFilter-pending" name="secondaryFilter" value="Pending">
      <label for="secondaryFilter-pending">Pending</label>
    </li>
  </ul>
</div>

Answer 4

var x = $ ('input [name = secondFilter]: флажок'). Val ()