单击无线电时更改背景颜色

当单击块内部的单选按钮时，我试图更改块的背景颜色。单击无线电时更改背景颜色

我这样做，但我不明白为什么它不工作。下面是代码：

$(document).ready(function() { 
 
    $('#rad').click(function() { 
 
     $('#label').addClass('radio-active'); 
 
    }); 
 
});

.radio-active { 
 
    background-color: black; 
 
    color: white; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li class="radio-item" id="label"> 
 
     <input id="rad" type="radio" name="rad" > 
 
     <label class="radio-label"for="f-option">£25</label> 
 
    </li> 
 
</ul>

THX

来源

2017-08-31 BeeLee

把你的类的风格标签或CSS file.Make确保您包括jQuery的。 – Mihai

我将您的代码块更改为片段。它看起来像那里的一切都很完美。你记得包含'jquery'库吗？ – Dekel

@ cjl750“li”元素有标签 – Dekel

正如其他人所说，这听起来好像你可能已经忘记了包裹在CSS标签<style>。

我把你的jQuery改写成了香草JS--因为它是一个你试图实现的相对简单的任务，为什么不去香草？ :-)

document.querySelector("#rad").addEventListener("change", function() { 
 
    var label = document.getElementById("label"); 
 
    label.classList.add("radio-active"); 
 
});

.radio-active { 
 
    background-color: black; 
 
    color: white; 
 
}

<ul> 
 
    <li class="radio-item" id="label"> 
 
     <input id="rad" type="radio" name="rad" > 
 
     <label class="radio-label"for="f-option">£25</label> 
 
    </li> 
 
</ul>

来源

2017-08-31 15:26:18

将这个CSS代码：在style标签

.radio-active { 
    background-color: black; 
    color: white; 
}

与像：

<style> 
.radio-active { 
    background-color: black; 
    color: white; 
} 
</style>

来源

2017-08-31 14:51:39

我想你错过了你的CSS类的<style>标签。因为你的代码工作：

$(document).ready(function() { 
 
    $('#rad').click(function() { 
 
    $('#label').addClass('radio-active'); 
 
    }); 
 
});

.radio-active { 
 
    background-color: black; 
 
    color: white; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<li class="radio-item" id="label"> 
 
    <input id="rad" type="radio" name="rad" > 
 
    <label class="radio-label"for="f-option">£25</label> 
 
</li>

来源

2017-08-31 14:52:32 hallleron

它完美地在这里工作......

您是否正确调用jQuery的？

<style> 
.radio-active { 
    background-color: black; 
    color: white; 
} 
</style> 

<script type="text/javascript"> 
$(document).ready(function() { 
    $('#rad').click(function() { 
     $('#label').addClass('radio-active'); 
    }); 
}); 
</script> 

<ul> 


<li class="radio-item" id="label"> 
    <input id="rad" type="radio" name="rad" > 
    <label class="radio-label"for="f-option">£25</label> 
</li> 

<li class="2radio-item" id="label2"> 
    <input id="rad2" type="radio" name="rad2" > 
    <label class="radio-label2"for="f-option2">£35</label> 
</li> 

</ul>

image uploaded

来源

2017-08-31 14:57:58

单击无线电时更改背景颜色

回答

相关问题