Как добавить строковое значение флажка, используя this.name в тот же массив с помощью jQuery

#javascript #jquery #arrays

#javascript #jquery #массивы

Вопрос:

Моя проблема в том, что я хочу добавить значение input-checkbox. Этот код добавляет значение, но не в тот же массив

 $(".ticketAddition").change(function (){
    var name = [];
    name.toString();
    if (this.checked) {
        name.push(this.name);
        console.log(name);
    }
});

1. Вы хотите перечислить имена установленных флажков?

2. Ошибка… Вы пробовали двигаться var name = []; выше $(".ticketAddition").change(function (){ ? Это то, чего вы пытаетесь достичь?

3. Ваша строка name.toString(); абсолютно ничего не делает.

4. name.toString() ничего не делает, поскольку результат нигде не используется

5. this.name это не значение флажка, это его имя…

Ответ №1:

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

 $(".ticketAddition").change(function (){
    var ticketSelection = [];
    $('.ticketAddition:checked').each(function() {
      ticketSelection.push(this.getAttribute('name'));
    });
    document.querySelector('#result').innerText = JSON.stringify(ticketSelection);
    // or console.log(ticketSelection)
});

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li><label><input type="checkbox" name="ticket_1" class="ticketAddition" /> Ticket #1</label></li>
  <li><label><input type="checkbox" name="ticket_2" class="ticketAddition" /> Ticket #2</label></li>
  <li><label><input type="checkbox" name="ticket_3" class="ticketAddition" /> Ticket #3</label></li>
</ul>

Checked tickets: <span id="result"></span>

Ответ №2:

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

 var name = [];
$(".ticketAddition").change(function (){
    name.toString(); // Why ?
    if (this.checked) {
        name.push(this.name);
        console.log(name);
    } else {
      name.splice(name.indexOf(this.name), 1);
    }
});

1. Ну и что, если флажок будет снят?

2. Вы удаляете (используете splice ) имя из массива.

3. Я хотел сказать splice

4. Ответы, которые объясняют, что изменилось и почему, голосуют чаще, чем те, которые просто говорят «попробуйте это»…

Ответ №3:

Вы можете выбрать все отмеченные флажки с помощью :checked селектора. Используйте map() и get() для перебора флажков.

 $(".ticketAddition").change(function() {

  var names = $(".ticketAddition:checked").map(function() {
    return this.name;
  }).get();

  console.log(names)
});

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="ticketAddition" name="apple" value="apple"> apple<br>
<input type="checkbox" class="ticketAddition" name="orange" value="orange"> orange<br>
<input type="checkbox" class="ticketAddition" name="pear" value="pear"> pear<br>

Ответ №4:

Вместо этого вы могли бы установить отмеченные флажки внутри вашего .tickedAddition элемента, где вы сопоставляете каждый элемент, выбранный с помощью $(":checkbox:checked", this) его value атрибута:

 $(".ticketAddition").change(function() {
  let names = $(":checkbox:checked", this).get().map(({value}) => value);
  console.log(names);
});

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="ticketAddition">
  <label for="first">Frog</label>
  <input type="checkbox" id="frog" name="cb" value="frog"/>
  <label for="first">Emu</label>
  <input type="checkbox" id="emy" name="cb" value="emu"/>
  <label for="first">Bird</label>
  <input type="checkbox" id="bird" name="cb" value="bird"/>
</form>