更改输入元素的父元素的样式
[英]changing the style of an input element's parent
问题描述
i wanna change the parent's style of an input element, when its checked 
我想更改输入元素的父级样式，当其选中时
<div> <!--- this is the parent element --->
<input type="radio" data-dynamic-update="1" name="virtuemart_paymentmethod_id" id="payment_id_3" value="3" checked="checked">
</div>
i found this after googling: 我在谷歌搜索后发现了这个：
var x = document.getElementById("payment_id_3");
x.addEventListener("click", function(){
$(x).parent().css({"background-color": "green", "border": "1px solid green"});
});
but it doesn't work.. how can i do this? 但它不起作用..我该怎么做？
6 个解决方案
解决方案1
1 2016-10-09 15:33:30
this is how you can do it. 这就是你可以做到的。 this example code show you how to use multiple radio buttons and change the style of the parent div . 此示例代码向您展示如何使用多个单选按钮以及如何更改父div的样式。
<html> <head></head> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <style> #parent{ width: 100px; height: 200px; background-color: orange; } </style> <body> <div id="parent"> <input type="radio" id="green" name="color"> Green<br> <input type="radio" id="pink" name="color"> Pink<br> <input type="radio" id="purple" name="color"> Purple<br> <input type="radio" id="red" name="color"> Red </div> <script type="text/javascript"> $("#parent input[type=radio]").on('click',function(){ var theId = $(this).attr('id'); if (theId =="green") { $("#parent").css({"background-color":"green"}); } else if (theId == "pink") { $("#parent").css({"background-color":"pink"}); } else if (theId == "purple") { $("#parent").css({"background-color":"purple"}); } else { $("#parent").css({"background-color":"red"}); } }) </script> </body> </html>
Note : above is an exapmle to get you an idea of how to do it. 注意：以上是示例，可帮助您了解如何执行此操作。 change the styles as you need. 根据需要更改样式。
In your case it can do with this simple lines.
$("#payment_id_3").click(function(){
$(this).parent().css({"background-color":"green","border": "1px solid green"});
});
note : in your case you should have define some styles to your parent div at the intial stage such as width, heigh. 注意：在您的情况下，您应该在初始阶段为父div定义一些样式，例如宽度，高度。 assuming that you have done it. 假设您已经做到了。
解决方案2
1 已采纳 2016-10-09 15:36:12
Solution updated with 'change' event and "on document ready" event: jsfiddle 解决方案已通过“更改”事件和“文档准备就绪”事件更新： jsfiddle
$(document).ready(function() {
$('#payment_id_3').on('change',function(){
if (this.checked) { //Checked CSS
$('#payment_id_3').parent().css({
'background-color': 'green',
'border': '1px solid green'
});
} else { // unchecked CSS
$('#payment_id_3').parent().css({
'background-color': 'red',
'border': '1px solid black'
});
}
});
$('#payment_id_3').trigger('change');
});
NOTICE: I've changed the "radio" to a checkbox. 注意：我已将“收音机”更改为复选框。 Edit: Updated JSFiddle link and Code 编辑：更新了JSFiddle链接和代码
解决方案3
0 2016-10-09 15:06:56
Get the fiddle: https://jsfiddle.net/45tb5rn5/ 摆弄小提琴： https : //jsfiddle.net/45tb5rn5/
The problem was with getting the element object: 问题在于获取元素对象：
$('#payment_id_3').click(function(){
$('#payment_id_3').parent().css({"background-color": "green", "border": "1px solid green"});
});
解决方案4
0 2016-10-09 15:07:51
You should just use jQuery for all instead like so: 您应该只对所有人使用jQuery，就像这样：
var x = $("#payment_id_3");
x.click(function(){
$(this).parent().css({"background-color": "green", "border": "1px solid green"});
});
解决方案5
0 2016-10-09 15:09:00
If you are using jQuery then try this: 如果您使用的是jQuery，请尝试以下操作：
$('#payment_id_3').on("change", function(){
$(this).parent().css({"background-color": "green", "border": "1px solid green"});
});
解决方案6
0 2016-10-09 15:10:57
Here's an example of a way you can change the div if the checkbox is checked. 这是一个如果选中复选框，则可以更改div的示例。
$('#payment_id_3').click(function(){
if($(this).prop('checked')){ // if checked
$(this).parents('div').css('background-color','red');
}
else{ // if not checked
$(this).parents('div').css('background-color','teal');
}
})
Here you can check out the Example in action. 在这里，您可以查看实际的示例 。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.