Manage checkboxes' functions with jQuery

Question

I have a select input:

<select size="1" name="filter" style="width:90px;" id="priority_filter" onchange="filter_user_trainings();">
  <option value="all">All</option>
  <option value="optional">Optional</option>
  <option value="mandatory">Mandatory</option>
  <option value="essential">Essential</option>
  <option value="custom">Custom</option>
</select>

<div style="width: 50%; text-align: right; float: right">
  <input type="checkbox" id="opt_box" onchange="somestuff()">Optional
  <input type="checkbox" id="mand_box" onchange="somestuff()" checked="checked">Mandatory
  <input type="checkbox" id="ess_box" onchange="somestuff()">Essential                           
</div>

And a jQuery code:

switch(priority_filter){
  case 'all':
    $("#opt_box").attr({checked: "checked"});
    $("#mand_box").attr({checked: "checked"});
    $("#ess_box").attr({checked: "checked"});
    break;

  case 'optional' :
    $("#opt_box").attr({checked: "checked"});
    $("#mand_box").removeAttr("checked");
    $("#ess_box").removeAttr("checked");
    break;

  case 'essential' :
    $("#ess_box").attr({checked: "checked"});
    $("#mand_box").removeAttr("checked");
    $("#opt_box").removeAttr("checked");
    break;

  case 'mandatory' :
    $("#mand_box").attr({checked: "checked"});
    $("#opt_box").removeAttr("checked");
    $("#ess_box").removeAttr("checked");

  case 'custom' :
    $("#mand_box").attr({checked: "checked"});
    $("#opt_box").removeAttr("checked");
    $("#ess_box").removeAttr("checked");
    break;    
}

I want to call the function in the "onchange" attr. when the js switch the checkboxes' values but it does not works. How can I fix it?

Adil Shaikh · Answer 1 · 2013-04-10T14:00:29.310

0

$("#opt_box").on('click',function(){
     if($(this).is(':checked')){
        // do your work here
     }
 });

edited Apr 10 '13 at 14:00

answered Apr 10 '13 at 13:43

Adil Shaikh

44,509
17
89
111

Notoriously fails on `IE` (lt 8), for which the `click` event is a valid alternative. – Sébastien Renauld Apr 10 '13 at 13:44
is it possible to make it work only with onclick or onchange or sg? – csaron92 Apr 10 '13 at 13:49
you can do this in `somestuff()` function which is called `onChange` just use this in your function `if($("#checkBoxId").is(':checked')){ // do your work here }` – Adil Shaikh Apr 10 '13 at 13:52

score 0 · Answer 2 · answered Apr 10 '13 at 13:49

Try this

<select size="1" name="filter" style="width:90px;" id="priority_filter" onchange="filter_user_trainings(this);">

JS

function filter_user_trainings(obj){
      var priority_filter=$(obj).val();
  switch(priority_filter){
     case 'all':
        $("#opt_box").attr({checked: "checked"});
        $("#mand_box").attr({checked: "checked"});
        $("#ess_box").attr({checked: "checked"});
    break;

    case 'optional' :
        $("#opt_box").attr({checked: "checked"});
        $("#mand_box").removeAttr("checked");
        $("#ess_box").removeAttr("checked");
    break;

    case 'essential' :
        $("#ess_box").attr({checked: "checked"});
        $("#mand_box").removeAttr("checked");
        $("#opt_box").removeAttr("checked");
    break;

    case 'mandatory' :
        $("#mand_box").attr({checked: "checked"});
        $("#opt_box").removeAttr("checked");
        $("#ess_box").removeAttr("checked");

    case 'custom' :
        $("#mand_box").attr({checked: "checked"});
        $("#opt_box").removeAttr("checked");
        $("#ess_box").removeAttr("checked");
    break;    
}
 }

score 0 · Answer 3 · answered Apr 10 '13 at 13:52

0

I think it should be $("#opt_box").attr("checked", "checked"); and not $("#opt_box").attr({checked: "checked"});. See if that is the case.
Also you need to pass the parameter to your method onchange="filter_user_trainings(<put selected option from dropdown here>);"

answered Apr 10 '13 at 13:52

PranitG

121
8

It works well. I have problem with the checkboxes' onclick/onchange event – csaron92 Apr 10 '13 at 13:55
u can try it using jQuery like $("#opt_box").change(function(){ // your required code }); – PranitG Apr 10 '13 at 14:02

score 0 · Answer 4 · edited May 23 '17 at 12:23

Get a look at this fiddle. I refactored your code a bit, but that's not the important part.

You should alter the "checked" property instead of the attribute
You must trigger the change event yourself, because that's not getting fired when setting either the property nor attribute via JS

So you must trigger the change event on target checkboxes and after that re-set the property to your desired value (like in my fiddle), because triggering the change event naturally also changes the checkbox' state.

$checkboxes.prop('checked', true).trigger('change');

Update: Ok, seems like triggering a change with JS actually doesn't change the checkbox' property, so you can trigger a change after the value has been set and get the correct value (which is the current state). Updated my fiddle.

Manage checkboxes' functions with jQuery

4 Answers4