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=".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>

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/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>

• javascript
• html
• jquery

• 1 Fix your html. Also, the checkbox change event should be change and not click – imhvost Commented Mar 24 at 22:17
• Go here before you post. – zer00ne Commented Mar 25 at 3:55

1 Answer 1

You can add a span with a selector, which you can use to select the element you want to change text to.

Pro tip: Use labels for checkboxes and radio buttons for better usability.

let choiceAHtml = "A. text that needs to be there when Testing Sample checkbox is checked"

$("[name='testingOptionSpring']").click(function() {

  // here, or inside one of the conditions below:
  changeTextForOption();

  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);
  }
});

function handleSampleChoice() {
  // dummy
}

function changeTextForOption() {
  $(".text-a").text(choiceAHtml)
}

label {
  display: block
}

<script src="https://cdnjs.cloudflare/ajax/libs/jquery/3.7.1/jquery.min.js"></script>


<span class="headerInstructions">1. <b>SAMPLE CHOICE:</b></span>

<label>
    <input id="sampleChoice1" name="sampleChoice" onchange="handleSampleChoice()" type="radio" value="choiceA">
    <span class="text-a">A. Some text goes here</span>
</label>

<label>
    <input id="sampleChoice2" name="sampleChoice" onchange="handleSampleChoice()" type="radio" value="choiceB" checked="checked">
    B. Some other text goes here
</label>


<span class="headerInstructions">2. <b>MAIL</b> the form </span>

<hr>



<b>Testing Sample.</b>
<br>

<label>
    <input id="testingOptionSpring1" name="testingOptionSpring" type="checkbox" value="true"><input type="hidden" name="_testingOptionSpring" value="on">
    <span class="instructionsSmaller">Testing Sample </span>
</label>