Jquery複選框選擇/取消選擇最佳給定X複選框

我假設在表單中有'X'複選框（任何輸入元素）和「M」選項選擇索引（「M」小於等於「X」）。那麼我如何選擇「M」選項索引/值並最優地取消選中其餘的複選框？即，假設我有10個複選框和5個選項索引（例如：1,2,4,5,8），那麼我必須選擇複選框與給定的索引。Jquery複選框選擇/取消選擇最佳給定X複選框

我能想出下面的代碼：

HTML: 

    <div id="Options">  
     <input id="choice_1" type="checkbox" name="choice_1" value="Option1"><label for="choice_1">Option1</label> 
     <input id="choice_2" type="checkbox" name="choice_2" value="Option2"><label for="choice_2">Option2</label> 
     <input id="choice_3" type="checkbox" name="choice_3" value="Option3"><label for="choice_3">Option3</label>  

    .. 
    ..till choice_10 

    </div> 

    IN JS: 

    //Have to select checkboxes with "Value" in choicesToSelect and give a selection 
    //effect to its label 
    var choicesToSelect={"Option1","Option9","Option3","Option4","Option2"}; 
    selectHighlightCheckBoxes(choicesToSelect); 


    function selectHighlightCheckBoxes(choices){ 
    $.each(
           choices, function(intIndex, objValue) { 

//select based on id or value or some criteria 
            var option = $("#Options :input[value=" + objValue + "]") ;      
            if ($(option).is("input[type='radio']") || $(option).is("input[type='checkbox']")) { 
             $(option).attr('checked', true); 
             $(option).next('label:first').css({ 'border': '1px solid #FF0000', 'background-color': '#BEF781', 'font-weight': 'bolder' }); 
            } else if ($(option).is("input[type='text']")) { 
             $(option).css({ 'border': '1px solid #FF0000', 'background-color': '#BEF781', 'font-weight': 'bolder' }); 
            } else { 

            } 
           } 
         ); 
    }

但我想還可以添加效果的休息（不choicesToSelect陣列）也。（對於那些不在choiceToSelect中的可能是紅色的）這可以在一個遍歷/循環中完成嗎？最佳？或更好的方式？

來源

2010-04-02 Amitd

您可以到這個修剪你的代碼，更快一點：

var choicesToSelect = ["Option1","Option9","Option3","Option4","Option2"]; 
selectHighlightCheckBoxes(choicesToSelect); 


function selectHighlightCheckBoxes(choices){ 
    $("#Options :input, label").removeAttr('checked').css({'border':'none', 'background-color':'none', 'font-weight':'normal'}); 
    $.each(choices, function(intIndex, objValue) { 
    var option = $("#Options :input[value=" + objValue + "]"), toStyle = null; 
    if (option.is(":radio, :checkbox")) { 
     toStyle = option.attr('checked', true).next('label'); 
    } else if ($(option).is(":text")) { 
     toStyle = option; 
    } 
    toStyle.css({ 'border': '1px solid #FF0000', 'background-color': '#BEF781', 'font-weight': 'bolder' }); 
    }); 
}

在功能上的第一行，就取消選中並刪除你申請的任何造型。添加任何你想要的「off」元素。

在末尾的toStyle行上，我整理了您的CSS以在一個位置定義。在那個.css()調用中，您可以設置您想要的「on」元素，並更改或刪除「off」元素所具有的樣式。 Here's a page you can play with to see it working :)

來源

2010-04-02 11:32:33

thx ..但如何將效果/ css添加到未選中的項目？例如：choicesToSelect爲'green'，而這些items不存在（「Off」元素）在choicesToSelect中爲'red'？ – Amitd 2010-04-02 12:01:05

@Amitd - 在頂部CSS中執行此操作，它適用於** all **元素，然後循環遍歷選定的元素。在'toStyle.css（）'部分中反轉或刪除適用於所有不需要的選項的所有樣式，是否合理？ – 2010-04-02 12:02:39

@Nick：在調用「selectHighlightCheckBoxes」之前添加此行： $（「＃Options：input，label」）。removeAttr（'checked'）。css（{'border'：'none'，'background-color'： 'red'，'font-weight'：'normal'}）; 是否正確？ – Amitd 2010-04-02 12:10:10

Jquery複選框選擇/取消選擇最佳給定X複選框

回答

相關問題