Как соответствующим образом заменить входные значения новыми значениями в jquery

#javascript #jquery #html #checkbox

#javascript #jquery #HTML #флажок

Вопрос:

просто хочу спросить, как я могу установить значения по умолчанию в соответствии с количеством доступных флажков. Например, у меня есть 3 флажка, и я хочу иметь значения по умолчанию 0,0,0, поскольку у меня есть 3 флажка. И если пользователь нажмет первый флажок, первый 0 будет заменен на 1, поскольку значение первого флажка имеет значение 1 и совпадает с остальными флажками. И если пользователь снимет первый флажок, он вернется к значению по умолчанию, которое равно 0. Я встроил свой фрагмент. Заранее благодарю вас, ребята.

 $('input#category').on('change', function () {
        var selectedCategories = $('.category:checkbox:checked').map(function () {
            return this.value;
        }).get();
        $('#post_category').val(selectedCategories);

    });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" value="1" id="category" name="category" class="category category_1">Category 1
<input type="checkbox" value="2" id="category" name="category" class="category category_2">Category 2
<input type="checkbox" value="3" id="category" name="category" class="category category_3">Category 3
<br />
<h5>Result:</h5>
<input type="text" id="post_category">

Ответ №1:

Убедитесь, что в вашем коде есть несколько элементов с одинаковыми id name атрибутами и, и они должны быть уникальными.

В обработчике change событий нет необходимости создавать сопоставление / перебирать все входные данные с установленным флажком, потому что флажок измененного элемента имеет свойства value и checked :

 var arr = [0, 0, 0],
    setPostCategory = function() {
      arr[this.value - 1] = (this.checked) ? this.value : 0;
      $('#post_category').val(arr.join(', '));
    };

$('input.category').on('change', setPostCategory);

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<input type="checkbox" value="1" name="category1" class="category">Category 1
<input type="checkbox" value="2" name="category2" class="category">Category 2
<input type="checkbox" value="3" name="category3" class="category">Category 3

<br>

<h5>Result:</h5>
<input type="text" id="post_category" value="0, 0, 0">

Ответ №2:

Вы уже это делаете, просто проверьте, установлены ли флажки внутри сопоставления

 var elems = $('.category[type="checkbox"]').on('change', function() {
    var selectedCategories = elems.map(function() {
        return this.checked ?  this.value : 0;
    }).get();

    $('#post_category').val(selectedCategories);
});

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" value="1" id="category1" name="category" class="category category_1">Category 1
<input type="checkbox" value="2" id="category2" name="category" class="category category_2">Category 2
<input type="checkbox" value="3" id="category3" name="category" class="category category_3">Category 3
<br />
<h5>Result:</h5>
<input type="text" id="post_category">

Обратите внимание на изменение селектора. У вас может быть одинаковое имя класса для всех трех входных данных, но они не могут иметь одинаковый идентификатор, поскольку идентификаторы уникальны

1. Спасибо вам за это замечательное. Теперь это работает! Большое спасибо!

2. @johnlopev: нет необходимости создавать карту / перебирать все входные данные с установленным флажком, потому что флажок измененного элемента имеет свойства value и checked .. Проверьте мой ответ

3. Этот ответ неверен: не исправлено несколько элементов с одним и тем же id атрибутом … а также устанавливается значение 1 в обработчике событий, но должно быть значением элемента в соответствии с вопросом

Ответ №3:

$(‘#post_category’).empty();

$(‘#post_category’).val(выбранные категории);