Q:

How to deselect a radio button if another one with a different name is selected

Ive got a group of radio buttons for different meals and i want to have them to have different names for each group.
Here is an image of what i have.

They can only select either, a Main Meal, a Jacket Potato or a Salad.
If they try to select a main, Then change their mind and select a salad it needs to deselect the main meal.
The radio buttons are labeled like the following, 
Group 1:lunch_main
Group 2:lunch_jacketpotato
Group 3:lunch_salad
Is there anyway to do this?

A:

That's not how radio-buttons are intended to work. Rather than give different names, give different data-* attributes. Common name attributes keep radio functionality, while the custom data-* attr will give you what you're looking for, without JS!
You can use custom data attributes like so:
<input type='radio' name='lunch' data-mealType='lunch' />
<input type='radio' name='lunch' data-mealWhatever='cool' />

