管理複選框功能使用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

回答

相關問題