0

我假设在表单中说“X”复选框（任何输入元素）和“M”选项选择索引（“M”小于等于“X”）。那么我如何选择“M”选项索引/值并以最佳方式取消选择其余复选框？

即假设我有 10 个复选框和 5 个选项索引（例如：1、2、4、5、8），那么我必须选择具有给定索引的复选框。

我可以想出以下代码：

   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 {

                                    }
                                }
                         );
   }

但我还想为其余部分添加效果（不在choiceToSelect 数组中）。（对于那些不在choiceToSelect 中的人来说可能是红色）这可以在一个遍历/循环中完成吗？最佳？还是更好的方法？

4

1 回答 1

1

你可以把你的代码精简到这个，更快一点：

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

在函数的第一行，它取消选中并删除您正在应用的任何样式。添加您希望“关闭”元素也具有的任何内容。

在最后toStyle一行，我将你的 CSS 合并到一个地方定义。在该.css()调用中，您可以设置您想要的“on”元素，并更改或删除“off”元素的样式。 这是您可以玩的页面以查看它的工作:)

于 2010-04-02T11:32:33.817 回答