使用切换功能更改文本

Question

我让我的复选标记输入具有到 show/hide 输入框的切换功能，但我想做的是让两个不同的文本选项随着切换选项淡入（显然，因为复选标记在页面加载时为真，以便在加载时也显示相应的文本）。

当复选框输入为真时，我希望它说，Enabled。

当复选框输入为假时，我想让它说，Turned Off。

我该怎么做？

// Checkbox checked and input disbaled when page loads
    $('#TYemailCheck').prop('checked', true);

    // Enable-Disable text input when checkbox is checked or unchecked
    function TYenable(trigger, target) {
        $(trigger).on('change', function () {
            $(target).toggle();
        });
    }
    TYenable("#TYemailCheck", "#TYemailEnabled");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" id="TYemailCheck">
<div id="TYemailEnabled">
     <input type="text">
 </div>

Answer 1

你应该包括两个 divs 包含你的文本和 toggle 根据 checkbox 更改它们之间。

// Checkbox checked and input disbaled when page loads
$('#TYemailCheck').prop('checked', true);
$('#turnedOff').hide();
// Enable-Disable text input when checkbox is checked or unchecked
function TYenable(trigger, target) {
      $(trigger).on('change', function () {
          $(target).toggle();
          $('#enabled, #turnedOff').fadeToggle(500);
      });
}
TYenable("#TYemailCheck", "#TYemailEnabled");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" id="TYemailCheck"><span id="enabled">Enabled</span><span id="turnedOff">Turned Off</span>
<div id="TYemailEnabled">
     <input type="text">
 </div>

使用切换功能更改文本

Changing text with a toggle function

javascript

jquery

function

toggle