当输入位于标签内时，更新无线电标签文本

Update radio labels text when inputs are inside labels

本文关键字：标签 更新 无线电 文本 于标签 输入      更新时间：2023-09-26

我有两组单选按钮。第一个是时间框架（月/计费周期），第二个是时间周期（3个月/6个月/9个月/12个月）。当我将"时间框架"更改为"计费周期"选择时，"时间周期"单选标签应更新为"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代码。

下面是.destrict（）函数，用于在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>

您已经为每个<label>使用了for属性，因此不需要用<label>包装<input>元素。你所需要做的就是打开包装，你就有了工作代码。看看：JSFiddle。

  • 如果您必须在不展开的情况下进行，请将.text()替换为.html()。请查看以下内容：JSFiddle

HTML

<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">3 Months</label>
        <input type="radio" id="timePeriod3" name="timePeriod" value="3" checked="checked" />
    <label for="timePeriod6">6 Months</label>
        <input type="radio" id="timePeriod6" name="timePeriod" value="6" />
    <label for="timePeriod9">9 Months</label>
        <input type="radio" id="timePeriod9" name="timePeriod" value="9" />
    <label for="timePeriod12">12 Months</label>
        <input type="radio" id="timePeriod12" name="timePeriod" value="12" />
</div>

jQuery

$("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);
  });
});

您可以在<span>:中包装要更改的文本

<label for="timePeriod3">
    <input type="radio" id="timePeriod3" name="timePeriod" value="3" checked="checked" />
    <span class='labelText'>3 Months</span>
</label>

然后：

var tperiods = $("#timePeriods label");
$.each(tperiods, function(idx, val) {
  var newLabel = $(this).text().replace(oldtext, newtext);
  $(this).find(".labelText").text(newLabel);
});

前几天看到这个问题，想知道为什么不使用之类的东西

$("input[name=timeFrame]").on("change", function () {
    var val = $(this).val();
    $('#timePeriods label').each(function () {
        if (val == 'cycles') $(this).html($(this).html().replace('Months', 'Cycles'))
        if (val == 'months') $(this).html($(this).html().replace('Cycles', 'Months'))
    })
});
相关文章：