Question

我有一个jquery-ui按钮，我知道如何使用css更改状态之间的样式，但我想知道如何更改标签文本。例如，如下所示的ON / OFF按钮 - 当[checked =“checked”]时，标签文本将=“ON”（未选中时为OFF）。

<input type="checkbox" id="device_4_state" name="device_4_state" class="toggle-button on-off" checked="checked" />
<label for="device_4_state">ON</label>

任何帮助都是巨大的。感谢。

Answer 1

这是解决方案：

$('#device_4_state').change(function(){
    if ($("#device_4_state").is(':checked'))
    {
        $("label[for='device_4_state']").text("ON");
    }
    else
    {
        $("label[for='device_4_state']").text("OFF");
    }

});

Answer 2

如果您希望使用纯CSS来设置标签文本，您可以使用CSS伪元素根据jquery-ui按钮的状态自动生成标签的内容。要使用此方法，请将标签留空（<label for="device_4_state"></label>）并包含如下所示的CSS：

.on-off + label > span:before {
    content: "OFF";
}
.on-off + label.ui-state-active > span:before {
    content: "ON";
}

如同这个jsfiddle：http://jsfiddle.net/GjPXZ/1/

使用jquery ui按钮切换更改文本（标签）

2 个答案: