0

我有一个选择输入：

<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>

和一个jQuery代码：

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;    
}

我想在“onchange”属性中调用该函数。当js切换复选框的值但它不起作用时。我该如何解决？

4

4 回答 4

0 
$("#opt_box").on('click',function(){
     if($(this).is(':checked')){
        // do your work here
     }
 });
于 2013-04-10T13:43:51.340 回答
0

尝试这个

<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;    
}
 }
于 2013-04-10T13:49:00.807 回答
0

我认为应该是 $("#opt_box").attr("checked", "checked")；而不是 $("#opt_box").attr({checked: "checked"});。看看是不是这样。
您还需要将参数传递给您的方法onchange="filter_user_trainings(<put selected option from dropdown here>);"

于 2013-04-10T13:52:17.017 回答
0

看看这个小提琴。我稍微重构了您的代码，但这不是重要的部分。

  1. 您应该更改“已检查”属性而不是属性
  2. 您必须自己触发更改事件，因为通过 JS 设置属性或属性时不会触发该事件

因此，您必须在目标复选框上触发更改事件，然后将属性重新设置为您想要的值（就像在我的小提琴中一样），因为触发更改事件自然也会更改复选框的状态。

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

更新：好的，似乎用 JS 触发更改实际上不会更改复选框的属性，因此您可以在设置值后触发更改并获取正确的值（即当前状态）。更新了我的小提琴。

于 2013-04-10T14:17:17.813 回答