Question

使用JQuery，是否有更有效的方法来编写此代码？见下文

JQuery：

$("#ex1").live("click", function(){
if($("#ex1").attr("checked")==true){ 
    $(this).parent().removeClass("im-unchecked").addClass("im-checked"); 
}
else if($("#ex1").attr("checked")==false){ 
    $(this).parent().removeClass("im-checked").addClass("im-unchecked");
}});


$("#ex2").live("click", function(){
if($("#ex2").attr("checked")==true){ 
    $(this).parent().removeClass("im-unchecked").addClass("im-checked"); 
}
else if($("#ex2").attr("checked")==false){ 
    $(this).parent().removeClass("im-checked").addClass("im-unchecked"); 
}});

我正在使用的HTML：

<label for="ex1" id="ex-label-1">Y <input type="checkbox" id="ex1" name="ex" value="Y" <% If IsEx("Y") then%>checked<%end if%> /></label>
<label for="ex2" id="ex-label-2">M <input type="checkbox" id="ex2" name="ex" value="M" <% If IsEx("M") then%>checked<%end if%> /></label>
<label for="ex5" id="ex-label-3">X <input type="checkbox" id="ex5" name="ex" value="X" <% If IsEx("X") then %>checked<%end if%> /></label>
<label for="ex3" id="ex-label-4">N <input type="checkbox" id="ex3" name="ex" value="N" <% If IsEx("N") then %>checked<%end if%> /></label>
<label for="ex6" id="ex-label-5">L <input type="checkbox" id="ex6" name="ex" value="L" <% If IsEx("L") then %>checked<%end if%> /></label>
<label for="ex7" id="ex-label-6">Z <input type="checkbox" id="ex7" name="ex" value="Z" <% If IsEx("Z") then %>checked<%end if%> /></label>
<label for="ex4" id="ex-label-7">A <input type="checkbox" id="ex4" name="ex" value="A" <% If IsEx("A") then %>checked<%end if%> /></label>

很抱歉，我是JavaScript / JQuery的新手

非常感谢任何帮助，谢谢

Answer 1

您可以使用name属性选择器并使用.toggleClass()来减少代码，如下所示：

$("input[name='ex']:checkbox").live("click", function(){
  $(this).parent().toggleClass("im-unchecked", !this.checked)
                  .toggleClass("im-checked", this.checked); 
});

You can give it a try here

Answer 2

是的，只需在每个复选框中添加一个类

<input type="checkbox" class="ex" id="ex1" name="ex" value="Y" <% If IsEx("Y") then%>checked<%end if%> />

并使用它而不是id（你也可以使用一些选择器，如：attr('checked') == true代替）

$(".ex").live("click", function(){
 var cb = $(this);
if(cb.is(':checked')){ 
    cb.parent().removeClass("im-unchecked").addClass("im-checked"); 
}
else{ 
    cb.parent().removeClass("im-checked").addClass("im-unchecked");
}});

编辑：修正了上述代码中的拼写错误。并添加了强制性jsfiddle：http://jsfiddle.net/X6jxL/

如果选中复选框，如何使用JQuery？</label>更改<label>的背景颜色

2 个答案: