CODEWITHSUNDEEP
javascripthtmljquerycheckbox
xif
xif

Reputation: 343

Get checkboxs value with Jquery return wrong values sometimes but not everytime

I try to get the checkbox checked values, It "works" not really well, sometimes I have the right value, sometime not, could you explain me why and how I can fix this ?

The purpose is at this end to build an array of all the values checked

Here a snippet : 

$( "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>

Thanks a lot for your help

Upvotes: 0

Views: 23

Answers (1)

Lapskaus
Lapskaus

Reputation: 1721

Your selector 

$( "input:checked" )

selects an array of all input elements that are ckecked. By then trying to retrieve the value of that selection with 

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

you end up always getting the value of the first element in that array.

If you want to output the value of all checked elements you need to iterate over that array and collect all values:

$( "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>

Upvotes: 1

Related Questions