modifying the appearance of the parent container of an input element

Question

modifying the appearance of the parent container of an input element

I'm trying to change the style of a parent element when its child input is 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>

After searching online, I came across this solution:

var x = document.getElementById("payment_id_3");
x.addEventListener("click", function(){
    $(x).parent().css({"background-color": "green", "border": "1px solid green"});
});

However, it doesn't seem to work. Can anyone help me fix this issue?

javascript jquery html css

Answer 1

Answer №1

An adjustment has been made to the solution by adding a 'change' event and an "on document ready" event: jsfiddle

$(document).ready(function() {
  $('#payment_id_3').on('change',function(){
    if (this.checked) { //Applying CSS for checked state
      $('#payment_id_3').parent().css({
        'background-color': 'green',
        'border': '1px solid green'
      });
     } else { // Applying CSS for unchecked state
       $('#payment_id_3').parent().css({
         'background-color': 'red',
         'border': '1px solid black'
       });
     }
  });
  $('#payment_id_3').trigger('change');
});

NOTICE: The input type has been changed from "radio" to checkbox. Edit: Updated JSFiddle link and Code

Answer 2

An adjustment has been made to the solution by adding a 'change' event and an "on document ready" event: jsfiddle

$(document).ready(function() {
  $('#payment_id_3').on('change',function(){
    if (this.checked) { //Applying CSS for checked state
      $('#payment_id_3').parent().css({
        'background-color': 'green',
        'border': '1px solid green'
      });
     } else { // Applying CSS for unchecked state
       $('#payment_id_3').parent().css({
         'background-color': 'red',
         'border': '1px solid black'
       });
     }
  });
  $('#payment_id_3').trigger('change');
});

NOTICE: The input type has been changed from "radio" to checkbox. Edit: Updated JSFiddle link and Code

Answer 3

Answer №2

Here is a demonstration of how you can achieve this using multiple radio buttons to change the style of the parent 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 : The above example serves as a guide, feel free to customize the styles according to your needs.

With just a few lines of code like below, you can achieve it in your scenario.

$("#payment_id_3").click(function(){
      $(this).parent().css({"background-color":"green","border": "1px solid green"});
});

note : Ensure that initial styles such as width and height are defined for your parent div beforehand.

Answer 4

Here is a demonstration of how you can achieve this using multiple radio buttons to change the style of the parent 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 : The above example serves as a guide, feel free to customize the styles according to your needs.

With just a few lines of code like below, you can achieve it in your scenario.

$("#payment_id_3").click(function(){
      $(this).parent().css({"background-color":"green","border": "1px solid green"});
});

note : Ensure that initial styles such as width and height are defined for your parent div beforehand.

Answer 5

Answer №3

Check out this fiddle for a solution: https://jsfiddle.net/45tb5rn5/

The issue arose from obtaining the element object:

$('#payment_id_3').click(function(){
    $('#payment_id_3').parent().css({"background-color": "green", "border": "1px solid green"});
});

Answer 6

Check out this fiddle for a solution: https://jsfiddle.net/45tb5rn5/

The issue arose from obtaining the element object:

$('#payment_id_3').click(function(){
    $('#payment_id_3').parent().css({"background-color": "green", "border": "1px solid green"});
});

Answer 7

Answer №4

It's best to utilize jQuery for all of your needs, such as:

let element = $("#payment_id_3");
element.click(() => {
    $(this).parent().css({"background-color": "green", "border": "1px solid green"});
});

Answer 8

It's best to utilize jQuery for all of your needs, such as:

let element = $("#payment_id_3");
element.click(() => {
    $(this).parent().css({"background-color": "green", "border": "1px solid green"});
});

Answer 9

Answer №5

For those utilizing jQuery, consider the following solution:

$('#payment_id_3').on("change", function(){
    $(this).parent().css({"background-color": "green", "border": "1px solid green"});
});

Answer 10

For those utilizing jQuery, consider the following solution:

$('#payment_id_3').on("change", function(){
    $(this).parent().css({"background-color": "green", "border": "1px solid green"});
});

Answer 11

Answer №6

If the checkbox is checked, you can modify the appearance of the div using this code snippet.

$('#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');
  }  
})

To see this code in action, visit this Example.

Answer 12

If the checkbox is checked, you can modify the appearance of the div using this code snippet.

$('#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');
  }  
})

To see this code in action, visit this Example.

modifying the appearance of the parent container of an input element

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

What is the process for incorporating dynamic templates in AngularJS?

Choose an element on a webpage by leveraging the power of Selenium

Move the menu button to the right of the title slide, beyond the edge of the card

Svelte: How to Create a Dynamic Component that Reacts to Changes in Variables

developing collections of objects in javascript

"Encountering a problem with Typescript when working with arrays

Exploring an array of JSON data with HandlebarsJS and BackboneJS

Emails sent through an HTML form submission should always include a valid "from"

Guide to presenting pictures from a database using PHP

React components featuring Material UI icons

Tips for displaying XML content within an AngularJS application using HTML

Using Bootstrap 4, you can create nested rows that will automatically expand to fill their parent container, which in turn has been set

Astro3.0 unable to locate images

Error retrieving data from the ngresource properties resource

Utilizing Jquery to Add Elements and Adjust Element Height

When attempting to navigate to a controller using Express.Router and Passport, encountering an undefined error with req.url.indexOf('?')

altering a PHP variable via a JavaScript variable in a query string

Event that signifies a change in the global state of the Angular 2 router

Validation of nested phone numbers using jQuery

Offering various language options on a website determined by the URL