当我单击单选按钮时，它的true或自动其他Span值将变为false

Question

When I clicked on the radio button, the span text changes to true or other should be false .

This code works perfectly fine:

 $('table').on('change', ':radio', function() { $(this).next('span').text('True').closest('td') .siblings().find('span').text('False'); }); 

 <tr> <td><input type="radio" name="attandance"><span>True</span></td> <td><input type="radio" name="attandance"><span>True</span></td> <td><input type="radio" name="attandance"><span>True</span></td> </tr> 

When I click on the radio button, it changes to "True" and when we click on the other radio button on the same row it remains the same.

I want to convert it back again, true to false.

Hope you all got my point.

Answer 1

The problem is that radio button is always selected because change event is triggered on selected one not on all of them. So you need to set correct to True and the rest of the them to False, this is how I would do it:

 $('table').on('change', ':radio', function () { $(this).next('span').text('True').closest('td') .siblings().find('span').text('False'); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr> <td> <input type='radio' name='attandance' ><span>False</span></td> <td> <input type='radio' name='attandance' ><span>False</span></td> <td> <input type='radio' name='attandance' ><span>False</span></td> </tr> </table> 

EDIT : And a bonus you can use this without JS:

 input[type="radio"]:not(:checked) + span::before { content: 'False'; } input[type="radio"]:checked + span::before { content: "True"; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr> <td> <input type='radio' name='attandance' ><span></span></td> <td> <input type='radio' name='attandance' ><span></span></td> <td> <input type='radio' name='attandance' ><span></span></td> </tr> </table> 

Answer 2

You need to reset the text of other span elements of the same table row as the radio button being clicked. Consider using the closest() method as shown below to achieve this:

 $('table').on('change', ':radio', function() { /* Access the closest tr ancestor to the radio button being clicked */ var tr = $(this).closest('tr'); /* Reset all span descendants for the anscestor tr to the default text of false */ $('span', tr).text('false'); /* Update the span relative to the checked radio button as you currently are */ $(this).next('span').text('true'); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <table> <tbody> <tr> <td> John </td> <td> <input type='radio' name='attandance0'><span>false</span></td> <td> <input type='radio' name='attandance0'><span>false</span></td> <td> <input type='radio' name='attandance0'><span>false</span></td> </tr> <tr> <td> Peter </td> <td> <input type='radio' name='attandance1'><span>false</span></td> <td> <input type='radio' name='attandance1'><span>false</span></td> <td> <input type='radio' name='attandance1'><span>false</span></td> </tr> <tr> <td> Andrew </td> <td> <input type='radio' name='attandance2'><span>false</span></td> <td> <input type='radio' name='attandance2'><span>false</span></td> <td> <input type='radio' name='attandance1'><span>false</span></td> </tr> </tbody> </table> 

Answer 3

you just need to reset each radio button on change...

  $('table').on('change', ':radio', function () { $(this).parents('table').find('span').text('false'); if($(this). prop("checked") == true){ $(this).next('span').text('true') } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr> <td> <input type='radio' name='attandance' value="ch" /><span>false </span></td> <td> <input type='radio' name='attandance' /><span>false </span></td> <td> <input type='radio' name='attandance' /><span> false</span></td> </tr> </table>