单击复选框时更改标签颜色

Posted 2023-02-25

【中文标题】单击复选框时更改标签颜色

【英文标题】：Changing label color when checkbox is clicked

【发布时间】：2014-03-27 20:19:59

【问题描述】：

我完全不解。我一直在试图弄清楚这件事。当用户单击复选框时，我正在尝试更改标签的颜色。下面的代码在小提琴中工作正常，但在网站上不起作用。我在 .还有什么可能导致这种情况吗？我应该注意什么？

html

<div class="product_checkbox_div">
<input type="checkbox" name="1" id="check1" value=""/>
<label class="product_ingredients_list">Yes</label>
</div>

CSS

.product_checkbox_divpadding-top:0.5%;padding-bottom:0.5%;vertical-align:top;
.product_ingredients_listfont-family:Calibri;font-size: 1em;color: #101010;font-weight:     normal;vertical-align:top;
.product_ingredients_list_1font-family:Calibri;font-size: 1.15em;color: #f33;font-weight: normal;vertical-align:top;

javascript

$( '.product_checkbox_div' ).on( 'click', 'input:checkbox', function () 
$( this ).next('label').toggleClass( 'product_ingredients_list_1', this.checked );
);

Fiddle

谢谢

【问题讨论】：

控制台有错误=S？

你有网站链接吗？

它仍然在本地主机上。但是我有另一个页面，其中的复选框可以正常工作。我不改变它的颜色，只是让一个 div 出现，但它工作正常。所以我很困惑为什么那个javascript代码不起作用。

【参考方案1】：

给你.......

http://jsfiddle.net/aqRrz/

$("document").ready(function () 

    $("input#check1").click(function () 

        if ($(this).is(':checked')) 

            $(this).next('label').addClass('product_ingredients_list_1');

         else 

            $(this).next('label').removeClass('product_ingredients_list_1');

        

    )

);

【讨论】：

天啊！这行得通！我会在正确的答案中选择它。但是还有一个问题让我更加困惑……实际上，在玩弄它之后，我通过简单地在脚本旁边添加“异步”来制作其他代码。但是，当我离开异步时，您的代码不起作用！我必须删除

异步不应该对我发布的代码有任何影响。我不知道为什么那会导致它不起作用

好吧，我的代码确实有些奇怪。我连续几次尝试添加/删除“异步”，它完全影响了它......感谢您的帮助！