使用jQuery來回更改標簽的html內容

Question

我有以下復選框：

<form action="">
   <input type="checkbox" id = "hide-completed" name="vehicle" value="Car">
   <span id =  'checkbox-label'> Hide completed tasks</span>
</form> 

我希望跨度內容在未選中復選框時說“隱藏已完成的任務”，而在選中復選框時說“顯示已完成的任務”。

可能重復的問題：我看過以下兩個問題：

使用jQuery來回更改HTML內容

fn.toggle（handler（eventObject），handler（eventObject）...）哪里去了？

不建議使用第一個鏈接上建議的方法（切換處理程序），並且第二個鏈接上建議的替換方法不適用於我。

謝謝

Answer 1

您可以在復選框的更改事件中找到選中/未選中狀態，然后根據該內容附加內容：

$('#hide-completed').change(function(){
  var c = this.checked ? 'Show completed tasks' : 'Hide completed tasks';
  $('#checkbox-label').text(c);
});

Answer 2

您可以將更改事件處理程序與.text（）一起使用

 //dom ready handler jQuery(function($) { //change handler for the checkbox $('#hide-completed').change(function() { //set the text based on the checked state of the checkbox $('#checkbox-label').text(this.checked ? 'Show completed tasks' : 'Hide completed tasks') }); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <form action=""> <input type="checkbox" id="hide-completed" name="vehicle" value="Car" /> <span id='checkbox-label'> Hide completed tasks</span> </form>