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

What is the best way to align inline-block elements in a straight row?

Ever since I switched to a different monitor, my Javascript has suddenly stopped functioning

Angular: Unable to retrieve defined data when loading a component

I am looking to implement user authentication using firebase, however, the sign-in page is currently allowing invalid inputs

Execute a PHP script upon button click without the need to refresh the page

Getting a pair of `focusin` events upon focusing

Is it possible to transmit an image using ajax and php without using a form or input type file?

showcase every value upon submission in the form with options to edit and delete

Unable to apply text decoration to a floating element

Only apply the CSS filter alpha to the parent element and not its children

Exploring the concept: Uploading images simultaneously on Facebook - Unraveling the

Using $.getJSON is not functioning properly, but including the JSON object directly within the script is effective

Using both jQuery and Ajax can result in multiple requests being sent when utilizing the focus

Is there a way to adjust the height of a DIV based on the background image and keep the text centered at the same time?

Learn how to efficiently redirect users without losing any valuable data after they sign up using localStorage

How can I retrieve the URL of images listed in my CSS file using Python?

Understanding the relationship between CSS height and line-height can help developers create more

Winning opportunities created by using credits in the slot machine

Is it possible to use jQuery/JS to automatically format currency input as it is typed, adding a 1000 separator and ensuring

Let's discuss how to include the scrollTop option