CODEWITHSUNDEEP
jqueryasp.net
user8464028
user8464028

Reputation:

dynamically building an array using jquery

I have 4 checkbox in html. I want if any checkbox is checked its value is stored in array. I created a function but its shows the empty array 

var arry = [];

function CheckBox(check) {
  debugger

  for (i = 0; i < check.length; i++) {
    if (check[i].checked == true) {
      arry.push(check[i].value);
      alert(arry);
    }
  }

}

$(document).ready(function() {

  $("#btn").click(function() {
    debugger;
    alert(arry);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="checkbox" id="chk1" value="1" class="chk" onclick="CheckBox(this)" />1
  <input type="checkbox" id="chk2" value="2" class="chk" onclick="CheckBox(this)" />2
  <input type="checkbox" id="chk3" value="3" class="chk" onclick="CheckBox(this)" />3
  <input type="checkbox" id="chk4" value="4" class="chk" onclick="CheckBox(this)" />4
  <input type="button" id="btn" value="alert" />
</div>

Upvotes: 1

Views: 50

Answers (3)

Ali Imran
Ali Imran

Reputation: 686

Add the following changes in you JavaScript/Jquery code 

$("#btn").click(function() {
    var arry = [];
    $.each($(".chk"), function() {
      if ($(this).is(":checked")) {
        arry.push($(this).val());
      }

    })
    alert(arry)
  });
});

Upvotes: 0

mplungjan
mplungjan

Reputation: 178215

Several issues. The worst was to not get the checkboxes in the function.

You passed one box, not an array of boxes

var arry = [];  
function CheckBox(check) {
  arry = [];  
  $("."+check.className).each(function() {  // get the other checks
    if (this.checked) { // or jQuery: $(this).is(":checked");
      arry.push(this.value); // or jQuery $(this).val()
      alert(arry);
    }
  })
}

$(document).ready(function() {

  $("#btn").click(function() {
    alert(arry);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="checkbox" id="chk1" value="1" class="chk" onclick="CheckBox(this)" />1
  <input type="checkbox" id="chk2" value="2" class="chk" onclick="CheckBox(this)" />2
  <input type="checkbox" id="chk3" value="3" class="chk" onclick="CheckBox(this)" />3
  <input type="checkbox" id="chk4" value="4" class="chk" onclick="CheckBox(this)" />4
  <input type="button" id="btn" value="alert" />
</div>

Upvotes: 0

guradio
guradio

Reputation: 15555

  1. You can use .each() to loop the checkbox
  2. Use .is(":checked") to check check state

$(document).ready(function() {

  $("#btn").click(function() {
    var arry = [];
    $.each($(".chk"), function() {
      if ($(this).is(":checked")) {
        arry.push($(this).val());
      }

    })
    console.log(arry)
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="checkbox" id="chk1" value="1" class="chk" />1
  <input type="checkbox" id="chk2" value="2" class="chk" />2
  <input type="checkbox" id="chk3" value="3" class="chk" />3
  <input type="checkbox" id="chk4" value="4" class="chk" />4
  <input type="button" id="btn" value="alert" />
</div>

Upvotes: 1

Related Questions