Question

我有一个选择输入：

<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”attr中调用该函数。当js切换复选框的值但它不起作用。我该如何解决？

Answer 1

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

Answer 2

试试这个

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

Answer 3

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

Answer 4

查看this fiddle。我重构了你的代码，但这不是重要的部分。

您应该alter the "checked" property instead of the attribute
您必须自己触发更改事件，因为that's not getting fired在通过JS设置属性或属性时

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

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

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

使用jQuery管理复选框的功能

4 个答案: