管理复选框功能使用jQuery

我有一个选择输入：管理复选框功能使用jQuery

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

我要调用的函数，在 “平变化” ATTR。当js切换复选框的值，但它不起作用。我该如何解决它？

来源

2013-04-10 csaron92

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

来源

2013-04-10 13:43:51

对'IE'（lt 8）出了名的错误，因为'click'事件是一个有效的选择。 – 2013-04-10 13:44:54

是否可以使它仅与onclick或onchange或sg一起使用？ – csaron92 2013-04-10 13:49:46

你可以在'somestuff（）'函数中调用'onChange'函数，只在你的函数中使用if（$（“＃checkBoxId”）。is（'：checked'））{ // do your在这里工作 }' – 2013-04-10 13:52:19

试试这个

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

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-10 13:49:00 Amit

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

来源

2013-04-10 13:52:17 PranitG

它运作良好。我有复选框的onclick/onchange事件 – csaron92 2013-04-10 13:55:24

的问题，你可以尝试使用jQuery，如 $（“＃opt_box”）。change（function（）{ //您需要的代码 }）; – PranitG 2013-04-10 14:02:50

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

你应该alter the "checked" property instead of the attribute
您必须触发自己的change事件，因为that's not getting fired通过JS

所以，你必须触发目标复选框和后更改事件那重新设置属性到你想要的值（就像我的小提琴），因为触发change事件自然也会改变复选框的状态。

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

更新：好吧，好像触发与JS的变化实际上并没有改变复选框的财产，这样你就可以值已设置后引发的变化，并得到正确的值（这是当前状态）。更新我的小提琴。

来源

2013-04-10 14:17:17 Simon

管理复选框功能使用jQuery

回答

相关问题