Unbreakable Unbreakable - 5 months ago 14
jQuery Question

How to capture checkbox input

I am learning web development and I have run into one problem. I have four checkbox in my form and I need to capture the state of checked checkboxes. Also I need to send the checked checkboxes id to the REST Service where I need to perform DIFFERENT operation for each of the checked checkboxes.

Below is what I have done till now.

<!DOCTYPE html>
<html>
<body>
<form>
<input type="checkbox" class = "checkBoxProp" id = "1" name="checkBoxProp" value="1">Graph1<br>
<input type="checkbox" class = "checkBoxProp" id = "2" name="checkBoxProp" value="2">Graph2<br>
<input type="checkbox" class = "checkBoxProp" id = "3" name="checkBoxProp" value="3">Graph3<br>
<input type="checkbox" class = "checkBoxProp" id = "4" name="checkBoxProp" value="4">Graph4<br>
<input id="btnGetResponse" type="button" value="ClickMe!"/>
</form>
<div> </div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$("#btnGetResponse").click(function()
{
var ids = []; // empty array
$('.checkBoxProp:checked').each(function() {
ids.push($(this).val()); // returning the value of the current element of all the elements selected
});
console.log(JSON.stringify(ids.join()));
$.ajax({
type: "POST",
url: "http://localhost:51349/SMS_Rest.svc/v1/usercheckboxes",
data: JSON.stringify(ids.join()) ,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(response)
{
sessionStorage.setItem(1, response);
window.location.href = "../backbonetest/dashboardUI.html";
},
failure: function(response)
{
alert('fail');
}
});
})


What I have done above is firstly selected all the checked checkboxes and pushed them into an array and then used
join()
to convert it into complete string and then converted it into JSON and sent.

For example if first and third checkboxes are checked the value sent is in format
of
"1,3"
to my Rest Service. Now since data of checkbox is being sent as string format altogether, at REST Service I will have to parse/split this string
(,)
and then perform necessary action. At REST all I want something like

if (firstcheckbox selected) // do something
if(secondcheckbox selected)// do something


Question: haven't I overcomplicated things. Do I really need to put all the checkboxes in an array and even if Yes then do I need to use
join()
and then stringify to send it to the rest service. Can I find a way where I do not need to Parse/Split the sent string at my REST Service to get all the checked checkbox id. I am new to all this. Please guide me.

Answer
  • Use jQueryObject.map to get checked checkbox values
  • As you are defining contentType as "application/json; charset=utf-8", no need to stringify the content.
  • Have a key for data object so that server can access the data using specified key

$("#btnGetResponse").click(function() {
  var ids = $('.checkBoxProp:checked').map(function() {
    return this.value;
  }).get();
  console.log(JSON.stringify(ids.join()));
  $.ajax({
    type: "POST",
    url: "http://localhost:51349/SMS_Rest.svc/v1/usercheckboxes",
    data: {
      ids: ids
    },
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(response) {
      sessionStorage.setItem(1, response);
      window.location.href = "../backbonetest/dashboardUI.html";
    },
    failure: function(response) {
      alert('fail');
    }
  });
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form>
  <input type="checkbox" class="checkBoxProp" id="1" name="checkBoxProp" value="1">Graph1
  <br>
  <input type="checkbox" class="checkBoxProp" id="2" name="checkBoxProp" value="2">Graph2
  <br>
  <input type="checkbox" class="checkBoxProp" id="3" name="checkBoxProp" value="3">Graph3
  <br>
  <input type="checkbox" class="checkBoxProp" id="4" name="checkBoxProp" value="4">Graph4
  <br>
  <input id="btnGetResponse" type="button" value="ClickMe!" />
</form>

Comments