jQuery实现选中复选框时修改对应.title文本的问题求助

问题场景 #

网站生成的HTML结构无法修改，示例结构如下：

<div>
    <span class="wrapper">
        <input type="checkbox" value="" id="nr1" name="X"> 
        <label for="X">
            <span class="Y">
                <span class="title">Text nr 1</span>
            </span>
        </label>
    </span>
</div>

需求是：点击#submit按钮时，将所有选中状态的复选框对应的.title文本统一改为“Checked”，但原jQuery代码无法生效。

原代码错误分析 #

原代码存在三个关键问题：

• 选择器语法错误：input:checkbox(:checked) 写法违规，正确的选中复选框选择器应为input[type="checkbox"]:checked或input:checkbox:checked。
• 元素查找逻辑错误：$(this)指向复选框元素，.title是复选框同级label内的元素，不在复选框的子节点中，因此find()方法无法找到目标元素。
• 方法调用错误：find( $(" .title").text("Checked")) 把执行了text()的jQuery对象作为参数传给find()，完全不符合find()的参数要求（应传入选择器字符串）。

修正后的代码方案 #

方案1：点击提交按钮时批量处理 #

$('#submit').on("click", function(){
   // 正确获取所有选中的复选框
   $("input[type='checkbox']:checked").each(function() {
      // 找到当前复选框所在的父容器.wrapper，再定位到里面的.title
      $(this).closest('.wrapper').find('.title').text("Checked");
   });  
});

方案2：实时监听复选框状态变化（可选） #

如果需要在用户勾选/取消勾选时实时修改文本，而非等待提交按钮：

// 初始化存储每个标题的原始文本（用于取消勾选时恢复）
$(".title").each(function(){
    $(this).data('original-text', $(this).text());
});

// 监听复选框的状态变化事件
$("input[type='checkbox']").on('change', function(){
    var $title = $(this).closest('.wrapper').find('.title');
    if($(this).is(':checked')){
        $title.text("Checked");
    } else {
        // 取消勾选时恢复原始文本
        $title.text($title.data('original-text'));
    }
});

关键逻辑说明 #

• 使用closest('.wrapper')：.wrapper是复选框和对应label的共同父容器，这种方式比直接查找同级label更稳定，即使后续HTML结构微调（比如label内的span层级变化），也能准确定位到对应的.title元素。
• 选择器input[type='checkbox']:checked：明确筛选所有处于选中状态的复选框，避免误选其他类型的输入控件。

内容的提问来源于stack exchange，提问作者J.K.