Question

这样的事情，我使用点击功能上的跨度，点击它时，其内容将会改变。我将jquery用于我的表单。代码在这里，如何在点击时更改其文本？

<form action="">
   <span id="checkall"><a href="javascript:void(0);">select all</a></span>
   <div class="all">
       <input id="" name="" type="checkbox" /> 1
       <input id="" name="" type="checkbox" /> 2
  </div> 
</form>

$(function() {
    var obj = $('input[type="checkbox"]');
    var txt = $('#checkall').text();
    //alert(txt);
    $('#checkall').on('click', function(e) {
        obj.each(function() {
            this.checked = ! this.checked;
          // use if ( this.checked) 
            //  text change its value
        })
    })
})

我把代码放在jsfiddle上： http://jsfiddle.net/huapei/6UfS2/1/

Answer 1

您可以使用三元表达式根据内容改变文本：

var link = $(this).find('a');
link.text() == "select all" ? link.text("un-select all") : link.text("select all");

演示：http://jsfiddle.net/6UfS2/2/

Answer 2

不确定我是否得到你的问题，但这样的事情可能会成功

var $this = $(this);
if ($this.text() == "select all" ) {
    $this.find('a').text("unselect all")
}
else {
    $this.find('a').text("select all")
}

DEMO

Answer 3

您可以添加其他链接以取消选中操作，然后使用toggle方法在它们之间切换：

<span id="checkall">
    <a href="javascript:void(0);" class="check-all">select all</a>
    <a href="javascript:void(0);" class="uncheck-all">deselect all</a>
</span>

JS

$('#checkall').on('click', function (e) {
    $(this).children().toggle();
    obj.each(function () {
        this.checked = !this.checked;
    });
});

好处是，如果更改链接文本，则无需修改JS代码。

http://jsfiddle.net/6UfS2/7/

Answer 4

循环浏览每个对象后添加此行：$(this).html()。将所需的新文本放在括号内。例如，$（this）.text（'Deselect all'）

Answer 5

如果你想切换'全选''取消选择全部'我建议你没有它的内容，而是一个存储它的变量。如果你切换元素的内容，你是非常受限制的，你永远不能再改变它的价值，或者你必须改变javascript以再次匹配它。

var whatToDoNext=  'check';
$('#checkall').on('click', function(e) {  
    var $allCheck = $('.all').find('input[type="checkbox"]');
    if( whatToDoNext== 'check' ){ 
        $allCheck.attr('checked', true); 
        whatToDoNext= 'uncheck'; //next click has to UNcheck
    }
    else{
        $allCheck.attr('checked', false); 
        whatToDoNext= 'check'; // next click has to check
    }
});

Answer 6

Drat在iPhone上编辑小提琴的速度太慢了

我将ID移至链接

$(function() {
  $('#checkall').on('click', function(e) {
    e.preventDefault();
    var obj = $('input[type="checkbox"]');
    var chk = $(this).text()=="uncheck all";
    chk = !chk;
    $(this).text(chk?"uncheck all":"check all");
    obj.each(function() {
      this.checked=chk;
    });
  });
})

单击后如何使标签更改其内容？

6 个答案: