如何在勾选复选框时通过jQuery/JavaScript动态更新指定表格单元格的文本

嘿，我完全懂你的需求！要实现这个其实很简单，核心就是准确找到要修改的表格单元格，同时别忘了保存原始文本，这样取消勾选时才能恢复回去。我给你一步步拆解解决方案：

第一步：定位目标表格单元格 #

选项A对应的<td>和单选按钮#sampleChoice1在同一个<tr>行里，所以我们可以借助这个关联来精准定位：

// 找到选项A所在行的第二个td（索引从0开始）
$('#sampleChoice1').closest('tr').find('td:eq(1)')

这种方式比直接用类名或固定选择器更可靠，就算页面其他表格结构调整，只要单选框和文本的行关联不变，代码就不会出错。

第二步：保存原始文本 #

在页面加载时，先把选项A的原始文本存起来，这样取消复选框时能恢复回去：

// 保存选项A的原始文本
let originalChoiceAText = $('#sampleChoice1').closest('tr').find('td:eq(1)').text().trim();
let choiceAHtml = "A. text that needs to be there when Testing Sample checkbox is checked"

第三步：修改复选框点击事件逻辑 #

在勾选/取消勾选的分支里，分别更新和恢复单元格文本：

$("[name='testingOptionSpring']").click(function () {
    // 先获取目标td元素，避免重复查询DOM
    const choiceATd = $('#sampleChoice1').closest('tr').find('td:eq(1)');
    
    if ($(this).is(":checked")) {
      console.log("Checkbox is checked so uncheck Samplechoice2 and check sampleChoice1");
      $('#sampleChoice2').prop('checked',false);
      $('#sampleChoice1').prop('checked',true);
      
      // 更新选项A的文本为自定义内容
      choiceATd.text(choiceAHtml);

      $("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);
        
        // 恢复选项A的原始文本
        choiceATd.text(originalChoiceAText);
    }
  });

完整的代码示例 #

这里是整合后的完整代码，直接替换你原来的代码就能用：

JavaScript部分

// 保存选项A的原始文本
let originalChoiceAText = $('#sampleChoice1').closest('tr').find('td:eq(1)').text().trim();
let choiceAHtml = "A. text that needs to be there when Testing Sample checkbox is checked"

$("[name='testingOptionSpring']").click(function () {
    const choiceATd = $('#sampleChoice1').closest('tr').find('td:eq(1)');
    
    if ($(this).is(":checked")) {
      console.log("Checkbox is checked so uncheck Samplechoice2 and check sampleChoice1");
      $('#sampleChoice2').prop('checked',false);
      $('#sampleChoice1').prop('checked',true);
      
      // 更新文本
      choiceATd.text(choiceAHtml);

      $("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);
        
        // 恢复原始文本
        choiceATd.text(originalChoiceAText);
    }
  });

HTML部分

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

额外小提示 #

• 我在代码里把目标td元素的查询缓存到了choiceATd变量里，避免每次点击都重复查询DOM，这样性能更好一点~
• 如果你的choiceAHtml里包含HTML标签（不只是纯文本），可以把.text()换成.html()来渲染标签内容。

备注：内容来源于stack exchange，提问作者Tan