0

像这样的东西，我使用点击功能的跨度，当它被点击时，它的内容会改变。我将 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/

4

6 回答 6

5

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

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

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

于 2013-08-05T14:51:19.470 回答
2

不知道我是否得到你的问题，但这样的事情可能会奏效

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

演示

于 2013-08-05T14:52:11.433 回答
0

在 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;
    });
  });
})
于 2013-08-05T15:09:14.047 回答
0

在遍历每个对象后添加这一行：$(this).html(). 将您想要的新文本放在括号内。例如，$(this).text('Deselect all')

于 2013-08-05T14:54:48.347 回答
0

如果您想切换“全选”“取消全选”，我建议您不要在其内容上使用它，而是将其存储在一个变量中。如果您对元素的内容进行切换，您将受到很大限制，您永远无法再次更改它的值，或者您必须更改 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
    }
});
于 2013-08-05T14:55:23.873 回答
0

您可以添加另一个链接以取消选中操作，然后使用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/

于 2013-08-05T14:54:02.327 回答