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

在doc ready块中或在关闭body标记之前，首先需要将更改处理程序附加到元素。然后，您可以触发更改事件，以便在呈现页面时文本正确。

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

});

Answer 2

您需要将事件监听器附加到您的复选框。

$(document).ready(function() {

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

  $('#active').bind('change', updateStatus);

  updateStatus();

});

更新 - 更改了代码以启动文档就绪。

Answer 3

这是因为您没有将代码绑定到复选框的onchange事件。

当页面加载时，您的代码只会检查是否选中了复选框，因为代码绑定到文档对象的onready事件。在此之后它将不再运行相同的代码

你可以试试这个。

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

Answer 4

您是否厌倦了使用'change'事件处理程序？

看起来有点像这样：

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

Answer 5

您可以调用函数onChange of checkbox：

<input name="active" type="checkbox" value="1" id="active" onchange="ChangeText();"/>

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

你可以在onload of body上调用相同的函数（ChangeText）。

jquery上的文字改变：缺血

5 个答案: