Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

当收音机输入在标签内时，如何更新标签文本？

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

Answer 1

您已经为每个<label>使用for attribute，因此您无需将<input>元素与<label>包装在一起。所有你需要做的解开，你将有工作代码。看看：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);
  });
});

Answer 2

下面是.detach()函数，用于在用新文本替换$input文本之前删除输入元素并将其保存到label变量。最后，使用.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>

Answer 3

您可以在<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);
});

Answer 4

前几天看到这个问题，并想知道为什么你没有使用类似的东西：

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

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

4 个答案: