---
title: "How to reset the background of parent of the radio button when unchecked?"  
description: "How to reset the background of parent of the radio button when unchecked?"  
author: "Anonymous User"  
published: 2013-09-25  
updated: 2013-09-25  
canonical: https://www.mindstick.com/forum/1540/how-to-reset-the-background-of-parent-of-the-radio-button-when-unchecked  
category: "css-css3"  
tags: ["css-css3"]  
reading_time: 2 minutes  

---

# How to reset the background of parent of the radio button when unchecked?

I have created one group of radio buttons in a table like

<table cellpadding="0" cellspacing="0" border="0">

<tbody>

<tr>

<td>

<input type="radio" name="radios" id="8-9" />

<label for="8-9">08-09 am</label>

</td>

</tr>

<tr>

<td>

<input type="radio" name="radios" id="9-10" />

<label for="9-10">09-10 am</label>

</td>

</tr>

</tbody>

</table>

and when any of the radio [button clicked](https://www.mindstick.com/forum/567/how-to-closed-jquery-model-popup-on-button-clicked) then the [background](https://www.mindstick.com/articles/65/how-to-change-background-color-of-tab-control-in-c-sharp) of [parent](https://www.mindstick.com/blog/154/how-to-find-parent-of-control-in-wpf) is need to be changed and JQuery for it is like-

$([document](https://www.mindstick.com/articles/328642/what-to-consider-while-choosing-a-software-documentation-tool)).on('click', '#8-9', [function](https://www.mindstick.com/articles/13001/multi-statement-table-valued-user-defined-function-in-sql-server) (event) {

$checked = $("#8-9").is(':checked');

if ($checked) {

$(this).parent().css("background-[color](https://www.mindstick.com/articles/77/how-to-split-form-background-color-in-c-sharp)", "#000");

$(this).parent().css("color", "#fff");

} else {

$(this).parent().css("background-color", "#ff0000");

$(this).parent().css("color", "#fff");

}

});

$(document).on('click', '#9-10', function (event) {

$checked = $("#9-10").is(':checked');

if ($checked) {

$(this).parent().css("background-color", "#000");

$(this).parent().css("color", "#fff");

} else {

$(this).parent().css("background-color", "#252525");

$(this).parent().css("color", "#fff");

}

});

this code is working , when radio is clicked the background of parent is changed, but when radio is unchecked the background of parent is not been reset to default. Is there any [mistake](https://yourviews.mindstick.com/view/88393/ai-humanity-s-greatest-invention-or-final-mistake) in my [script](https://www.mindstick.com/interview/477/how-can-i-execute-a-php-script-using-command-line) or any other way is there of this?

## Replies

### Reply by Pravesh Singh

Hi Jacob,

You can optimize the code like below

```
$(document).on('change', '.radioBtn', function (event) {    $('.radioBtn').parent().css("background-color",
"#FFF").css("color", "#000");   
$(this).parent().css("background-color",
"#000").css("color", "#fff");});
```

## And modify the HTMl like this,

```
<table cellpadding="0" cellspacing="0" border="0">    <tbody>        <tr>           
<td>               
<input type="radio" name="radios" id="8-9" class="radioBtn" />               
<label for="8-9">08-09 am</label>           
</td>        </tr>        <tr>           
<td>               
<input type="radio" name="radios" id="9-10" class="radioBtn"/>               
<label for="9-10">09-10 am</label>           
</td>        </tr>    </tbody></table>
```


---

Original Source: https://www.mindstick.com/forum/1540/how-to-reset-the-background-of-parent-of-the-radio-button-when-unchecked

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.