Как установить все флажки, если установить один флажок, нажать кнопку и получить значения? - PullRequest
Новая
       0

Как установить все флажки, если установить один флажок, нажать кнопку и получить значения?

0 голосов
/ 05 апреля 2020

для одного идентификатора. Мне это понравилось, но как получить все идентификаторы по нажатию кнопки, когда установлен универсальный флажок для всех столбцов Мой Html Файл: - 

 <td><input type="checkbox" name="option" value="{{item.customerid}} " required ></td>
 <input type="button" value="Transfer" (click)="getclickedevent($event)">

Мой Javascript файл : - 

 getclickedevent(event) {

  let id  = $("input:checkbox[name=option]:checked").val();

    console.log("The Required checkbox checked is "+ id)

  }

Ответы [ 5 ]

0 голосов
/ 05 апреля 2020

Добавьте ID к вашим кнопкам и вызовите их как селекторы для .click().

Добавьте функцию, чтобы получить щелчок на кнопке «Выбрать все», и установите для всех входов значение «проверено». Для выбора элементов ввода, являющихся флажками, добавлен класс option.

Определить пустой массив для хранения ваших значений. Проведите проверенные значения через .each() l oop и присвойте их массиву.

Эти значения теперь будут жить в массиве options. 

$(document).ready(function() {
    $('#selectall').click(function(){
        $('.option').prop("checked", true);
    });
  $('#transfer').click(function() {
    var options = [];
    $.each($("input[type='checkbox']:checked"), function() {
      options .push($(this).val());
    });
    console.log(options);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="option" type="checkbox" name="option" value="{{item.customerid}}">
<input class="option" type="checkbox" name="option" value="{{item.customerid}}">
<input class="option" type="checkbox" name="option" value="{{item.customerid}}">
<input class="option" type="checkbox" name="option" value="{{item.customerid}}">

<input type="button" id="transfer" value="Transfer">
<input type="button" id="selectall" value="Select All">
0 голосов
/ 05 апреля 2020

Это должно работать для вас. ↓↓ 

<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<input type="checkbox" onclick="$('input[name*=\'customer_store\']').prop('checked', this.checked);"/> Select / Deselect<br>
 
 <input type="checkbox" name="customer_store[]" value="xyz"/>xyz<br>
 <input type="checkbox" name="customer_store[]" value="abc"/>abc<br>
0 голосов
/ 05 апреля 2020

Вы можете получить все отмеченные значения флажков в обработчике события нажатия кнопки, используя метод jquery .map(), например: 

var ids = $("input:checkbox[name=option]:checked").map(function(){
    return $(this).val();
}).get();

console.log(ids) //==> ['xxx', 'xxx', 'xxx', ...]

Это даст массив basi c, содержащий все отмеченные значения флажков.

DEMO: 

$("#checkAll").click(function() {
  $("input:checkbox[name=option]").prop('checked', this.checked);

  var ids = $("input:checkbox[name=option]:checked").map(function() {
    return $(this).val();
  }).get();

  console.log(ids)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="checkAll">Check All
<hr />
<input type="checkbox" name="option" value="1">Item 1
<input type="checkbox" name="option" value="2">Item 2
<input type="checkbox" name="option" value="3">Item3
0 голосов
/ 05 апреля 2020

Надеюсь, вы не возражаете, но я применил подход к рефакторингу вашего кода.

Вот HTML: 

<td>
  <input type="checkbox" name="option" value="{{item.customerid}}" required >
</td>
<input type="button" value="Transfer">

<div id='options'>
  <br><input name='options' type="checkbox">
  <br><input name='options' type="checkbox">
  <br><input name='options' type="checkbox">
  <br><input name='options' type="checkbox">
  <br><input name='options' type="checkbox">
</div>

А вот jQuery. Я использовал jQuery, потому что вы пропустили нативные javascript и jQuery в своем коде: 

$('input[type="button"][value="Transfer"]').click( function() {  
  let id  = $("input:checkbox[name=option]").is(':checked');

    $('input[name="options"]').each(function() { 
        this.checked = id; 
      });
});

Вы можете видеть все это работает здесь .

0 голосов
/ 05 апреля 2020

сделать всех потомков идентификатора одним главным идентификатором

, затем использовать это 

var div = // getElementById, etc
var children = div.childNodes;
var elements = [];
for (var i=0; i<div.childNodes.length; i++) {
  var child = div.childNodes[i];
  if (child.nodeType == 1) {
    elements.push(child)      
  }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...