Получить значения флажков с Jquery иногда возвращает неправильные значения, но не каждый раз

Question

Я пытаюсь установить флажок для проверенных значений, он «работает» не очень хорошо, иногда у меня правильное значение, иногда нет, не могли бы вы объяснить, почему и как я могу это исправить?

С этой целью цель состоит в создании массива всех проверенных значений

Здесь фрагмент:

$( "input" ).on( "click", function() {
		alert('test : ' + $( "input:checked" ).val() + " is checked!"  );
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="options-check">
    <div class="row">
      <div class="col-sm-4  col-lg-4">

        <div class="form-check form-check-inline">
          <input class="form-check-input" type="checkbox" id="inlineCheckbox1" name="abc" value="all">
          <label class="form-check-label" for="inlineCheckbox1">All</label>
        </div>
        <div class="form-check form-check-inline">
          <input type="checkbox" id="inlineCheckbox2" name="abc"  value="businessrules">
          <label class="form-check-label" for="inlineCheckbox2">Business Rules</label>
        </div>
        <div class="form-check form-check-inline">
          <input  type="checkbox" id="inlineCheckbox3" name="abc" value="scriptinclude">
          <label class="form-check-label" for="inlineCheckbox3">Script Include</label>
        </div>
        <div class="form-check form-check-inline">
          <input  type="checkbox" id="inlineCheckbox4" name="abc" value="schedulejobs">
          <label class="form-check-label" for="inlineCheckbox4">Scheduled Jobs</label>
        </div>
      </div>
      <div class="col-sm-4 col-lg-4">
        <div class="form-check form-check-inline">
          <input  type="checkbox" id="inlineCheckbox5" name="abc" value="uiaction">
          <label class="form-check-label" for="inlineCheckbox5">UI Action</label>
        </div>
        <div class="form-check form-check-inline">
          <input  type="checkbox" id="inlineCheckbox6" name="abc" value="uipolicies">
          <label class="form-check-label" for="inlineCheckbox6">UI Policies</label>
        </div>
        <div class="form-check form-check-inline">
          <input  type="checkbox" id="inlineCheckbox7" name="abc" value="uimacro">
          <label class="form-check-label" for="inlineCheckbox7">UI Macro</label>
        </div>
        <div class="form-check form-check-inline">
          <input type="checkbox" id="inlineCheckbox8" name="abc" value="uipage">
          <label class="form-check-label" for="inlineCheckbox8">UI Page</label>
        </div>
      </div>
      </div>
      </div>

Большое спасибо за вашу помощь

Answer 1

Ваш селектор

$( "input:checked" )

выбирает массив всех входных элементов, которые проверяются. Затем, пытаясь получить значение этого выбора с помощью

$( "input:checked" ).val() 

, вы всегда получаете значение первого элемента в этом массиве.

Если вы хотите чтобы вывести значение всех проверенных элементов, вам нужно перебрать по этому массиву и собрать все значения:

$( "input" ).on( "click", function() {
    let checkedValues = $( "input:checked" ).map(function() {
        return $(this).val();
    }).get().join(', ');
    alert('Checked: ' + checkedValues   );
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="options-check">
    <div class="row">
      <div class="col-sm-4  col-lg-4">

        <div class="form-check form-check-inline">
          <input class="form-check-input" type="checkbox" id="inlineCheckbox1" name="abc" value="all">
          <label class="form-check-label" for="inlineCheckbox1">All</label>
        </div>
        <div class="form-check form-check-inline">
          <input type="checkbox" id="inlineCheckbox2" name="abc"  value="businessrules">
          <label class="form-check-label" for="inlineCheckbox2">Business Rules</label>
        </div>
        <div class="form-check form-check-inline">
          <input  type="checkbox" id="inlineCheckbox3" name="abc" value="scriptinclude">
          <label class="form-check-label" for="inlineCheckbox3">Script Include</label>
        </div>
        <div class="form-check form-check-inline">
          <input  type="checkbox" id="inlineCheckbox4" name="abc" value="schedulejobs">
          <label class="form-check-label" for="inlineCheckbox4">Scheduled Jobs</label>
        </div>
      </div>
      <div class="col-sm-4 col-lg-4">
        <div class="form-check form-check-inline">
          <input  type="checkbox" id="inlineCheckbox5" name="abc" value="uiaction">
          <label class="form-check-label" for="inlineCheckbox5">UI Action</label>
        </div>
        <div class="form-check form-check-inline">
          <input  type="checkbox" id="inlineCheckbox6" name="abc" value="uipolicies">
          <label class="form-check-label" for="inlineCheckbox6">UI Policies</label>
        </div>
        <div class="form-check form-check-inline">
          <input  type="checkbox" id="inlineCheckbox7" name="abc" value="uimacro">
          <label class="form-check-label" for="inlineCheckbox7">UI Macro</label>
        </div>
        <div class="form-check form-check-inline">
          <input type="checkbox" id="inlineCheckbox8" name="abc" value="uipage">
          <label class="form-check-label" for="inlineCheckbox8">UI Page</label>
        </div>
      </div>
      </div>
      </div>