I have a scenario where selecting a checkbox for Testing sample
switches the radio button to option A and unchecking the checked checkbox switches back the radio button to option B as shown in the code snippet below. By default, option B is selected.
My question:
When Testing Sample
checkbox is checked, in addition to switching the option to A from B (which is already happening in the code below), I want to update the text of html as well from A. Some text goes here
to the one defined in the variable choiceAHtml
. However, I’m little confused here as I’m dealing with the table cell element so how should I select this part of table <td> A. Some text goes here</td>
in order to update the text dynamically using jQuery or javascript?
let choiceAHtml = "A. text that needs to be there when Testing Sample checkbox is checked"
$("[name='testingOptionSpring']").click(function () {
if ($("[name='testingOptionSpring']").is(":checked")) {
console.log("Checkbox is checked so uncheck Samplechoice2 and check sampleChoice1");
$('#sampleChoice2').prop('checked',false);
$('#sampleChoice1').prop('checked',true);
$("input[name='sampleChoice']").each(function(){
console.log(this.value + ":" +this.checked);
})
//
} else {
console.log("Checkbox is NOT checked so uncheck Samplechoice1 and check sampleChoice2");
$('#sampleChoice2').prop('checked',true);
$('#sampleChoice1').prop('checked',false);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<td colspan="2">
<table border="0" cellpadding="5" cellspacing="5" align="center">
<tbody><tr>
<td colspan="2"><span class="headerInstructions">1. <b>SAMPLE
CHOICE:</b>
</span></td>
</tr>
<tr>
<td valign="top"><input id="sampleChoice1" name="sampleChoice" onchange="handleSampleChoice()" type="radio" value="choiceA"></td>
<td> A. Some text goes here</td>
</tr>
<tr>
<td valign="top"><input id="sampleChoice2" name="sampleChoice" onchange="handleSampleChoice()" type="radio" value="choiceB" checked="checked"></td>
<td><span class="headerInstructionsBlue">B.Some other text goes here</td>
</tr>
<tr>
<td colspan="2"><span class="headerInstructions">2. <b>MAIL</b>
the form </td>
</tr>
</tbody></table>
</td>
<td colspan="2">
<table border="0" cellpadding="5" cellspacing="5" align="center">
<tbody><tr>
<td><b>Testing Sample.</td>
</tr>
<tr>
<td>
<input id="testingOptionSpring1" name="testingOptionSpring" type="checkbox" value="true"><input type="hidden" name="_testingOptionSpring" value="on">
<span class="instructionsSmaller">Testing Sample </span></td>
</tr>
</tbody></table>
</td>