Displaying cell border after selecting radio button - html

Question

I have table in which i have input/radio buttons, and i need to make if user selects radio button in specific cell, that cell should have border, so that cell looks like selected. I dont have, any idea how to do this.
Here is example of table.
<tr class="crna">
<td>Crna</td>
<td class="no-value"></td>
<td>
<input id="r-band2-crna" value="0" type="radio" name="prsten-2-radio" checked="checked">
<label for="r-band2-crna">0</label>
</td>
<td>
<input id="r-band3-crna" value="0" type="radio" name="prsten-3-radio" checked="checked">
<label for="r-band3-crna">0</label>
</td>
<td>
<input id="r-multi-crna" value="1" type="radio" name="prsten-4-radio" checked="checked">
<label for="r-multi-crna">x10<sup>0</sup></label>
</td>
<td class="no-value"></td>
<td><input id="r-tcr-crna" value="250" type="radio" name="tcr-radio" checked="checked">
<label for="r-tcr-crna">±250</label>
</td>
</tr>
This should be done using jQuery and CSS.
Thanks for help.

Answer 1

This solution is at jQuery and CSS.
The border is added by the class, method addClass(). The class itself must be added to your CSS:
.current {
border: 1px solid green;
}
Also, method closest() is applied, which allows you to refer to the specified parent of the tag <td>.
$('input[type="radio"]').on('change', function() {
$('input[type="radio"]').closest('td.current').removeClass('current');
$(this).closest('td').addClass('current');
});
.current {
border: 1px solid green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr class="crna">
<td>Crna</td>
<td class="no-value"></td>
<td>
<input id="r-band2-crna" value="0" type="radio" name="prsten">
<label for="r-band2-crna">0</label>
</td>
<td>
<input id="r-band3-crna" value="0" type="radio" name="prsten">
<label for="r-band3-crna">0</label>
</td>
<td>
<input id="r-multi-crna" value="1" type="radio" name="prsten">
<label for="r-multi-crna">x10<sup>0</sup></label>
</td>
<td class="no-value"></td>
<td><input id="r-tcr-crna" value="250" type="radio" name="prsten">
<label for="r-tcr-crna">±250</label>
</td>
</tr>
</table>

Answer 2

To get you going in the right direction at least, here are some high level ideas:
When the radio button gets toggled, there are two possible ways you can leverage that to apply a style:
a. events like click and change are fired that you can respond to with your JavaScript.
b. The :checked CSS pseudo-class selector applies to the element if it's toggled on
either by adding/removing an attribute (usually a class attribute like 'active-cell') on the event, or leveraging the native pseudo-class, you'll need to add the styles to represent a border. (Here's a breakdown of why I say 'represent' a border: Applying borders to a single table cell when using border-collapse - it's not quite as simple as adding a css border property.)
Usually toggling a class is going to dramatically simplify your HTML and CSS because you can do a bit of DOM traversal to select a parent element of the input to apply the class and it's styles to.
Using the pseudo class is nifty in that it doesn't require JavaScript, but since CSS doesn't have a 'parent' selector, and you want to style the cell containing the input you have to get creative with your selectors...that would likely be done by having the element right after the input be selected, (or maybe a :before pseduo element) and adding some positioning and other styling to make it look like a border. for example:
input[type="radio"]::checked + label::before {
/* styles will apply to label elements that immediately follow selected radio inputs */
}

Answer 3

First, the radio buttons from the same group shall have the same name.. Also why all buttons are checked?
To achieve what you want you can use event listeners. there are event listeners for every action and then you can change the DOM when the action happens.
So with the radio button you can create an event listener for "change" action.
$(document).ready(function(){
$('input[name="prsten-2-radio"]').change(function(){
// remove border from other cells
$('input[name="prsten-2-radio"]').parent().attr('style', 'none')
//put a border only to the selected
$(this).parent().attr('style', 'border: solid black')
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr class="crna">
<td>Crna</td>
<td class="no-value"></td>
<td>
<input id="r-band2-crna" value="0" type="radio" name="prsten-2-radio">
<label for="r-band2-crna">0</label>
</td>
<td>
<input id="r-band3-crna" value="0" type="radio" name="prsten-2-radio">
<label for="r-band3-crna">0</label>
</td>
<td>
<input id="r-multi-crna" value="1" type="radio" name="prsten-2-radio">
<label for="r-multi-crna">x10<sup>0</sup></label>
</td>
<td class="no-value"></td>
<td><input id="r-tcr-crna" value="250" type="radio" name="prsten-2-radio">
<label for="r-tcr-crna">±250</label>
</td>
</tr>
</table>
Here are some resources that might help you:
https://www.w3schools.com/jquery/jquery_selectors.asp
https://www.w3schools.com/jquery/jquery_events.asp
https://api.jquery.com/category/selectors/
https://api.jquery.com/category/events/
Good luck!