jquery - jquery 上的文本更改 :ischecked

Question

我正在尝试构建一个函数来更改复选框选择上的文本，请检查以下内容...

Jquery代码

$(document).ready(function() {
if($('#active').is(':checked')) {
    $('strong', '#status').text('Active');
}
else {
    $('strong', '#status').text('Inactive');
}
});

HTML 表单

 <span id="status"><input name="active" type="checkbox" value="1" id="active" />
<strong>Active</strong></span>

它在页面加载时工作得很好，但如果我们更改 #active 的值或单击 #active，它不会更改事件或非事件等文本。感谢您的帮助。

Answer 1

在文档就绪 block 内或在结束正文标记之前，您首先需要将更改处理程序附加到元素。然后您可以触发更改事件，以便在呈现页面时文本正确。

$(function(){

    function setDisplayText() {

      var displayText = this.checked ? 'Active' : 'Inactive';
      $('strong', '#status').text(displayText);

    }

    //setup change handler and then trigger 
    //it to ensure correct text on doc ready
    $('#active').change(setDisplayText)
                .trigger('change');

});