文本变化：

器isChecked我

我试图建立一个函数来改变复选框的选择文本，请检查下面...文本变化：

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，它不会像活动或非活动一样更改文本。感谢帮助。

来源

2011-04-11 seoppc

在一个doc准备好的块内或者在关闭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'); 

});

来源

2011-04-11 10:35:54 redsquare

很好用，谢谢。 – seoppc 2011-04-11 10:41:28

正是我所需要的 - 谢谢！ – elduff 2011-11-14 19:25:13

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

$(document).ready(function() { 

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

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

    updateStatus(); 

});

更新 - 改变代码火上文件准备为好。

来源

2011-04-11 10:30:35

你的代码正在工作，但不起作用，当我加载页面时，复选框没有打勾，它显示活动而不是无效。 – seoppc 2011-04-11 10:35:19

查看我的更新代码，查看完整示例。 – 2011-04-11 10:39:01

这也可以通过在页面加载时触发更改事件来完成。像'$（'＃active'）。trigger（'change'）;' – naiquevin 2011-04-11 10:45:34

您是否厌倦了使用“更改”事件处理程序？

它看起来有点像这样：

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

来源

2011-04-11 10:31:26

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

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

您可以试试这个。

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

来源

2011-04-11 10:32:38 naiquevin

你可以调用复选框的功能的onChange：

<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调用同一个函数（ChangeText）。

来源

2011-04-11 10:33:34 Karthik

回答

相关问题