icheck set dynamically checked for checkbox or radio button using jquery

5.1k views Asked by At

I can check which button clicked or not given below:

But what I need to do is by ajax call back if I get value 'Y' or 'N' then set checked for radio button. please help me through this.

$('input').iCheck({
  checkboxClass: 'icheckbox_minimal',
  radioClass: 'iradio_minimal',
  increaseArea: '20%' // optional
});
$('input[type=radio][name=kitchen]').on('ifChecked', function() {
  if (this.value === "N") {
    alert('No');
  } else {
    alert('Yes');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/icheck.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/skins/all.css" rel="stylesheet" />
<div class="checkbox">
  <label>Is Kitchen <input type="radio" name="kitchen" value="Y" class="flat"> 
     Yes <input type="radio" name="kitchen" value="N" class="flat"> No
    </label>
</div>

1

There are 1 answers

2
Zakaria Acharki On BEST ANSWER

Make your ajax call, then in the callback check the returned data and use iCheck() function to check the desired element.

Example :

$.get('url', {}, function( data ){
    if ( data === "Y" ){
        $(':radio[name=kitchen][value=Y]').iCheck('check');
    } else {
        $(':radio[name=kitchen][value=N]').iCheck('check');
    }
});

Hope this helps.

$('input').iCheck({
  checkboxClass: 'icheckbox_minimal',
  radioClass: 'iradio_minimal',
  increaseArea: '20%' // optional
});

var data = "N";

if ( data === "Y" ){
    $(':radio[name=kitchen][value=Y]').iCheck('check');
} else {
    $(':radio[name=kitchen][value=N]').iCheck('check');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/icheck.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/skins/all.css" rel="stylesheet" />
<div class="checkbox">
  <label>Is Kitchen <input type="radio" name="kitchen" value="Y" class="flat"> 
     Yes <input type="radio" name="kitchen" value="N" class="flat"> No
    </label>
</div>