基于复选框更改样式w/jQuery

当需要选中或取消选中该行中的复选框时，需要更改整行的样式。基于复选框更改样式w/jQuery

function myFunc() { 
    if ($(".chkbx:checked").length) { 
     $(this).parent().parent().css("background-color","red"); 
    } else { 
     $(this).parent().parent().css("background-color","green"); 
    } 
} 

myFunc(); 

$(".chkbx").change(myFunc);

<table> 
    <tr> 
     <td><input type="checkbox" class="chkbx" checked></td> 
     <td>label 1</td> 
    </tr> 
    <tr> 
     <td><input type="checkbox" class="chkbx" checked></td> 
     <td>label 1</td> 
    </tr> 
    <tr> 
     <td><input type="checkbox" class="chkbx" checked></td> 
     <td>label 1</td> 
    </tr> 
</table>

我觉得我失去了一些东西......

来源

2011-11-30 santa

$('.chkbx').change(function(){ 
    var $this = $(this), 
     color = ($this.is(':checked')) ? 'red' : 'green'; 
    $this.closest('tr').css('background-color', color); 
});

演示：http://jsfiddle.net/6dR8C/1/

来源

2011-11-30 01:26:18 AlienWebguy

没有什么不对，但通常您会在使用jQuery框架时看到以$为起点的jQuery对象开始的变量。 '$ color'使得它看起来好像该变量正在尊重jQuery，在我看来，'color'将是一个更好的选择，因为它只是一个字符串。 – Justin808

你可以这样做：

$(document).ready(function() { 
    $(".chkbx").click(function() { 
     if ($(this).is(":checked")) { 
      $(this).closest("tr").css('background-color' ,'red'); 
     } 
     else { 
      $(this).closest("tr").css('background-color' ,'green'); 
     } 
    }); 
});

来源

2011-11-30 01:18:50

你的意思是'父母（ “TR”）'。 – Purag

某些复选框可以在页面加载时进行检查，并且我需要在页面加载时应用样式，然后单击任何复选框。 – santa

@Purmou'closest'会正常工作。 – AlienWebguy

看到一个例子here。

问题是您的if正在检查所有匹配.chkbx:checked的元素。如果选中任何复选框，则为真。你必须检查一个复选框，this。

更新：样式初始化为here。

来源

2011-11-30 01:20:41 Justin808

你说得对。我也需要在页面加载时分配样式，而不仅仅是点击。 +1 for jsfiddle – santa

虚构-1强制大家去另一个网站查看您的解决方案。如果JSFiddle永远消失，这个答案变得毫无用处。 – Maverick

@santa我更新了jsFiddle。 – Justin808

这里是一个有效的解决方案：http://jsfiddle.net/gDtLX/

基本上，你的if说法有点过，仿佛复选框中的任何被检查的话将永远是正确的。然后，在加载时，您可以使用jQuery的trigger()在每个复选框上触发change事件，而不是使用myFunc()手动调用该函数。

来源

2011-11-30 01:22:48 Leo

我会用一个CSS类然后添加/删除类上的复选框是否被选中或不

$(function(){ 
    $("input.chkbx").click(function(){ 
    if($(this).is("checked")) { 
     $(this).parent("tr").addClass('checkedRow'); 
    } else { 
     $(this).parent("tr").removeClass('checkedRow'); 
    } 
    }); 
});

通过使用类的颜色（或其它样式）可以很容易地通过样式表修改。

来源

2011-11-30 01:23:19

是的，我将改为上课。我需要确保样式适用于加载，而不仅仅是点击。谢谢。 – santa

在您的示例脚本中，您在页面加载时调用myFunc（），它将为您执行此操作。 :) –

是的，这是主意......但有些不对。谢谢。 – santa

据我所知，你想遍历你的复选框，如果复选框是红色的，则表格行变红，否则为绿色。此外，每当任何复选框发生更改时，您都希望这样做。

你应该使用jQuery的“each”方法遍历复选框。就像这样：

function myFunc() { 
    $('.chkbx').each(function() { 
     var $this = $(this); 
     if ($this.is(':checked')) { 
      $this.parents('tr').css("background-color","red"); 
     } else { 
      $this.parents('tr').css("background-color","green"); 
     } 
    }); 
} 

myFunc(); 

$(".chkbx").change(myFunc);

你可以看到例如工作在这里的源代码： http://jsbin.com/awexak/edit#preview

来源

2011-11-30 01:23:32 aulizko

基于复选框更改样式w/jQuery

回答

相关问题