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

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;
    });
  });
})
于 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 に答える