javascript - 当输入在标签内时更新单选标签文本

Question

我有两组单选按钮。第一个是时间范围(月/计费周期)，第二个是时间段(3 个月/6 个月/9 个月/12 个月)。当我将时间范围更改为计费周期选择时，时间段单选标签应更新为 3 个周期等。将时间范围切换回月，时间段标签更新为 3 个月等。

$("input[name=timeFrame]").on("change", function() {
    var tframe = $(this).val();
    var oldtext = "Months";
    var newtext = "Cycles";

    if (tframe === "months") {
        oldtext = "Cycles";
        newtext = "Months";
    }
  
    var tperiods = $("#timePeriods label");

    $.each(tperiods, function(idx, val) {
        var newLabel = $(this).text().replace(oldtext, newtext);
        $(this).text(newLabel);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
    <label for="timeFrameMonths">
        <input type="radio" id="timeFrameMonths" name="timeFrame" value="months" checked="checked" />Months
    </label>
    <label for="timeFrameCycles">
        <input type="radio" id="timeFrameCycles" name="timeFrame" value="cycles" />Billing Cycles
    </label>
</div>
<br/>

<div id="timePeriods">
    <label for="timePeriod3">
        <input type="radio" id="timePeriod3" name="timePeriod" value="3" checked="checked" />3 Months
    </label>
    <label for="timePeriod6">
        <input type="radio" id="timePeriod6" name="timePeriod" value="6" />6 Months
    </label>
    <label for="timePeriod9">
        <input type="radio" id="timePeriod9" name="timePeriod" value="9" />9 Months
    </label>
    <label for="timePeriod12">
        <input type="radio" id="timePeriod12" name="timePeriod" value="12" />12 Months
    </label>
</div>

当单选输入在标签内时，如何更新标签的文本？

注意，如果输入在标签之外，上面的代码会很好用。我正在寻找的是一些适用于当前 HTML 结构的 jQuery 代码。

Answer 1

下面是.detach()在 label 文本被新文本替换之前，用于删除输入元素并将其保存到 $input 变量的函数。最后使用 .prepend() 附加保存的 $input 变量方法返回标签作为标签内的第一项。

$("input[name=timeFrame]").on("change", function() {
    var tframe = $(this).val();
    var oldtext = "Months";
    var newtext = "Cycles";

    if (tframe === "months") {
        oldtext = "Cycles";
        newtext = "Months";
    }
  
    var tperiods = $("#timePeriods label");

    $.each(tperiods, function(idx, val) {
        $input =  $(this).find("input").detach();
        var newLabel = $(this).text().replace(oldtext, newtext);
        $(this).text(newLabel);
        $(this).prepend($input);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
    <label for="timeFrameMonths">
        <input type="radio" id="timeFrameMonths" name="timeFrame" value="months" checked="checked" />Months
    </label>
    <label for="timeFrameCycles">
        <input type="radio" id="timeFrameCycles" name="timeFrame" value="cycles" />Billing Cycles
    </label>
</div>
<br/>

<div id="timePeriods">
    <label for="timePeriod3">
        <input type="radio" id="timePeriod3" name="timePeriod" value="3" checked="checked" />3 Months
    </label>
    <label for="timePeriod6">
        <input type="radio" id="timePeriod6" name="timePeriod" value="6" />6 Months
    </label>
    <label for="timePeriod9">
        <input type="radio" id="timePeriod9" name="timePeriod" value="9" />9 Months
    </label>
    <label for="timePeriod12">
        <input type="radio" id="timePeriod12" name="timePeriod" value="12" />12 Months
    </label>
</div>