Showing a cell border when a radio button is chosen

Question

Showing a cell border when a radio button is chosen

I am working with a table that contains input/radio buttons, and I am trying to figure out how to apply a border to a specific cell when the user selects the radio button within it. This will give the appearance of the cell being selected. I am not sure how to accomplish this task. Below is an example of the 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>

I need to implement this using jQuery and CSS. Any guidance on how to achieve this would be greatly appreciated.

html jquery css

Answer 1

Answer №1

This solution involves utilizing jQuery along with CSS.

The border is applied using the addClass() method. The corresponding CSS class must be defined as follows:

.current {
  border: 1px solid green;
}

Additionally, the closest() method is used to target the specified parent element of the <td> tag.

$('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

This solution involves utilizing jQuery along with CSS.

The border is applied using the addClass() method. The corresponding CSS class must be defined as follows:

.current {
  border: 1px solid green;
}

Additionally, the closest() method is used to target the specified parent element of the <td> tag.

$('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 3

Answer №2

If you're looking to get started in the right direction, here are some key concepts to consider:

One way to apply a style when a radio button is toggled is by utilizing events like click and change in JavaScript or using the :checked CSS pseudo-class.
You can add or remove a class attribute (such as 'active-cell') on the event to represent a border around the element. This may require some creativity in styling due to the complexities of applying borders to table cells.

Adding and removing classes dynamically can simplify your HTML and CSS code, while using pseudo-classes in CSS eliminates the need for JavaScript. However, styling the parent element of the input requires strategic selector usage and potentially adding positioning properties.

input[type="radio"]::checked + label::before { 
  /* styles will be applied to labels following selected radio inputs */
}

Answer 4

If you're looking to get started in the right direction, here are some key concepts to consider:

One way to apply a style when a radio button is toggled is by utilizing events like click and change in JavaScript or using the :checked CSS pseudo-class.
You can add or remove a class attribute (such as 'active-cell') on the event to represent a border around the element. This may require some creativity in styling due to the complexities of applying borders to table cells.

Adding and removing classes dynamically can simplify your HTML and CSS code, while using pseudo-classes in CSS eliminates the need for JavaScript. However, styling the parent element of the input requires strategic selector usage and potentially adding positioning properties.

input[type="radio"]::checked + label::before { 
  /* styles will be applied to labels following selected radio inputs */
}

Answer 5

Answer №3

Make sure that all radio buttons within the same group have the same name to function properly. Additionally, why are all buttons checked by default?

To achieve your desired outcome, you can utilize event listeners that respond to specific actions and modify the Document Object Model (DOM) accordingly.

For instance, with radio buttons, you can implement an event listener for the "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')
            
            // Apply a border only to the selected cell
            $(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>

Check out these helpful resources:

Best of luck!

Answer 6

Make sure that all radio buttons within the same group have the same name to function properly. Additionally, why are all buttons checked by default?

To achieve your desired outcome, you can utilize event listeners that respond to specific actions and modify the Document Object Model (DOM) accordingly.

For instance, with radio buttons, you can implement an event listener for the "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')
            
            // Apply a border only to the selected cell
            $(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>

Check out these helpful resources:

Best of luck!

Showing a cell border when a radio button is chosen

Answer №1

Answer №2

Answer №3

Similar questions

How can I safeguard my HTML and CSS content from being altered using tools similar to Firebug?

The active class consistently adds new menu options without removing the previous ones

Turn off smooth scrolling in Bootstrap 5 using HTML and CSS techniques

Utilizing jQuery to place an element beside another and maintain its position

The boundary extends fully to the right

ControlsContainer - jQuery object for Flexslider

Using JavaScript to Toggle Visibility of Div Elements

PHP button echo not working as expected

Unsupported MIME format

Error message: "An undefined index error occurred during an Ajax call to a

Can the color of text be adjusted (to either white or black) based on the background color (in any color and format)?

Using AJAX to retrieve Laravel Route results in incorrect URL leading to 404 Error (Not Found)

Maintain line breaks in the scanner input within an HTML element

What's the best way to update the fill color of an SVG dynamically?

Convert JavaScript code to Google Appscript

The controller method in Laravel is not being triggered by AJAX

Is the XPath in Selenium executed against the Document Object Model (DOM) or the HTML file

Finding the class name of the parent div: A simple guide

Tips on utilizing CSS modules in React without changing class names

The Php Include function is known to create unnecessary whitespace and disregard any specified styles