CODEWITHSUNDEEP
javascriptjquery
user10216059
user10216059

Reputation:

When i click on radio button then its true or automatically other Span value goes to false

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

Screenshot

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.

Upvotes: 2

Views: 94

Answers (3)

Yogi
Yogi

Reputation: 1

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>

Upvotes: 0

jcubic
jcubic

Reputation: 66560

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>

Upvotes: 2

Dacre Denny
Dacre Denny

Reputation: 30370

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>

Upvotes: 1

Related Questions