Показать все отмеченные элементы как запятую, используя jquery - PullRequest
0 голосов
/ 19 апреля 2020

В приведенном ниже коде у меня есть переменная thatparticularsel, которая дает значение только того конкретного флажка, который отмечен, и все theselectedvalues ​​вернет все значения отмеченных флажков, предположим, что если я проверил 2 ранее, а текущий 1, то это даст мне 3 и мне нужно отобразить эти 3 как запятую, но в настоящее время я могу связать только один

Ответы [ 2 ]

1 голос
/ 19 апреля 2020

Как я уже упоминал в комментарии, вы можете добавить значения в массив и использовать Array.prototype.join() для их отображения, например:

HTML

<input type='checkbox' value='1' />
<div>Value 1</div>
<input type='checkbox' value='2' />
<div>Value 2</div>
<input type='checkbox' value='3' />
<div>Value 3</div>

<div id="result"></div>

JS

$('input').on('change', function () {
    // filter checked checkboxes and add the inner text of its next element to an array
    var values = $('input:checked').map(function () {
        return $(this).next().text();
    }).get();

    // values.join(', ') is what you are looking for
    $('div#result').text(values.join(', '));
});

Пример вывода:

Value 1, Value 2

Это то, что вы хотите?

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

В следующей демонстрации есть несколько флажков и один специальный, который проверяет / снимает флажки других флажков программно. Все детали прокомментированы в демоверсии.

/*
This will check all checkboxes is #ALL is checked and vice
versa
*/
$('#ALL').change(function(e) {
  if ($(this).is(':checked')) {
    $(':checkbox').not(this).prop('checked', true);
  } else {
    $(':checkbox').not(this).prop('checked', false);
  }
});

/*
If any checkbox is changed by the user...
Define a empty array
Get each checkbox..
if a checkbox is checked...
...get its value and push that value into that array
Once each checkbox is done display the array in output
*/
$(":checkbox").on('change', function(e) {
  let checked = [];
  $(':checkbox').each(function(i) {
    if ($(this).is(":checked")) {
      if ($(this).val()) {
        checked.push($(this).val());
      }
    }
  });
  $('output').val(checked);
});
<input id='ALL' type='checkbox' value=''> ALL<br>
<hr>
<input type='checkbox' value='1'> 1<br>
<input type='checkbox' value='2'> 2<br>
<input type='checkbox' value='3'> 3<br>
<input type='checkbox' value='4'> 4<br>
<input type='checkbox' value='5'> 5<br>
<input type='checkbox' value='6'> 6<br>
<input type='checkbox' value='7'> 7<br>
<output></output>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...