CODEWITHSUNDEEP
jquerycheckbox
Santhucool
Santhucool

Reputation: 1726

Need to make selected in a CheckboxGroup using jQuery

I have a <CheckboxGroup> as follows:

<CheckboxGroup name="permitted">
  <input type="checkbox" value="1" />Orders
  <input type="checkbox" value="2" />Production
  <input type="checkbox" value="3" />Dispatch
  <input type="checkbox" value="4" />Returns
  <input type="checkbox" value="5" />Sundry
  <input type="checkbox" value="6" />Collection
  <input type="checkbox" value="7" />Pending Amount
  <input type="checkbox" value="8" />Pending Bills
  <input type="checkbox" value="9" />Ledger
  <input type="checkbox" value="10" />Day Book
</CheckboxGroup>

I am trying to make some of the checkboxes selected out of this,

Suppose I need Orders,Dispatch to be checked using jQuery. I have the corresponding values 1,3 with me.

Check my fiddle: FIDDLE

Upvotes: 3

Views: 100

Answers (2)

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167250

You can select those using the attribute selector and use .prop() to check the checkboxes:

$('[value="1"], [value="3"]').prop("checked", true);


$('[value="1"], [value="3"]').prop("checked", true);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" value="1" />Orders
<input type="checkbox" value="2" />Production
<input type="checkbox" value="3" />Dispatch
<input type="checkbox" value="4" />Returns
<input type="checkbox" value="5" />Sundry
<input type="checkbox" value="6" />Collection
<input type="checkbox" value="7" />Pending Amount
<input type="checkbox" value="8" />Pending Bills
<input type="checkbox" value="9" />Ledger
<input type="checkbox" value="10" />Day Book

Update

From AJAX, you can do this way:

$(function () {
  valuesFromAjax = "1,2";
  valuesFromAjax = valuesFromAjax.split(",");
  valuesFromAjax.map(function (Id) {
    $('[value="' + Id + '"]').prop("checked", true);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" value="1" />Orders
<input type="checkbox" value="2" />Production
<input type="checkbox" value="3" />Dispatch
<input type="checkbox" value="4" />Returns
<input type="checkbox" value="5" />Sundry
<input type="checkbox" value="6" />Collection
<input type="checkbox" value="7" />Pending Amount
<input type="checkbox" value="8" />Pending Bills
<input type="checkbox" value="9" />Ledger
<input type="checkbox" value="10" />Day Book

Upvotes: 3

Alex Char
Alex Char

Reputation: 33228

Assuming the array has string values you can use the following code:

$(document).ready(function() {
  //init an array with the values from OP
  var values = ["1", "3"];
  //iterate through each checkbox
  $("CheckboxGroup[name='permitted'] :checkbox").each(function() {
    //if value exist in array change the status of the checkbox
    $(this).prop("checked", values.indexOf(this.value) !== -1);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<CheckboxGroup name="permitted">
  <input type="checkbox" value="1" />Orders
  <input type="checkbox" value="2" />Production
  <input type="checkbox" value="3" />Dispatch
  <input type="checkbox" value="4" />Returns
  <input type="checkbox" value="5" />Sundry
  <input type="checkbox" value="6" />Collection
  <input type="checkbox" value="7" />Pending Amount
  <input type="checkbox" value="8" />Pending Bills
  <input type="checkbox" value="9" />Ledger
  <input type="checkbox" value="10" />Day Book
</CheckboxGroup>

Upvotes: 2

Related Questions