使用jquery在标签之间来回更改html内容

时间:2014-10-31 02:35:04

标签: javascript jquery

我有以下复选框:

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

我希望当取消选中该复选框时,span内容会显示“隐藏已完成的任务”;选中该复选框时,我希望“显示已完成的任务”。

可能重复的问题: 我看过以下两个问题:

Changing html content back and forth with jQuery

Where has fn.toggle( handler(eventObject), handler(eventObject)...) gone?

第一个链接(切换处理程序)上建议的方法已弃用,第二个链接上建议的替换不适用于我。

谢谢

2 个答案:

答案 0 :(得分:3)

您可以在更改事件复选框中找到已选中/未选中状态,然后根据该内容附加内容:

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

答案 1 :(得分:0)

您可以使用change event handler.text()来执行此操作

&#13;
&#13;
//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')
  });
})
&#13;
<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>
&#13;
&#13;
&#13;