切換文本，在複選框輸入更改

我搜索了並嘗試了很多代碼&樣本，但我沒有得到我的觀點。我有3 checkbox輸入和3 labels每個之後，和div包括<p>標記。我想要檢查每個checkbox，下一個要在<p>標記中複製的標籤文本，以及當我取消選中它時，請刪除<p>標記中的文本。我的意思是通過更改輸入切換<p>標籤內的標籤文本。切換文本，在複選框輸入更改

我的HTML代碼：

<div class="chbxs"> 
    <input type="checkbox" name="country" id="Iran" rel="Iran" /> 
    <label for="Iran">Mashad,Tehran</label> 

    <input type="checkbox" name="country" id="England" rel="England" /> 
    <label for="England">London,Manchester</label> 

    <input type="checkbox" name="country" id="USA" rel="USA" /> 
    <label for="USA">California,NewYork</label> 
</div> 
<div class="countries"> 
    <p></p> 
</div>

我jQuery代碼：

$('.chbxs input[type="checkbox"]').click(function() { 
    var chkdChkbox = $(this).next('label').text(); 
    if ($(this).prop('checked') == true) { 
     $('.countries > p').append('<span>' + chkdChkbox + '</span>'); 
    } 
    else { 
     $('.countries > p').children('span').remove(); 
    } 
});

的問題是，如果我取消的輸入，所有的跨度都將被刪除。我怎樣才能解決這個問題？坦克你這麼多。 P.S：我也想用逗號分隔各個文本。

來源

2013-08-18 Payam Shakibafar

舉一個'id'或'class'的跨度。如果只有一個，'id'會更好。 –

您需要修改邏輯，這樣生成考慮到所有這些checkboxes檢查，而不是它被點擊一個文本。試試這個：

var setCountryText = function() { 
    var $p = $('.countries > p').empty(); 
    $('.chbxs :checkbox:checked').each(function() { 
     $p.append('<span>' + $(this).next('label').text() + '</span>'); 
    }); 
} 

$('.chbxs input[type="checkbox"]').click(setCountryText);

Example fiddle

來源

2013-08-18 14:22:39

非常感謝你，還有一件事請。我想用逗號分隔它們。如果我使用'$ p.append（''+ $（this）.next（'label'）。text（）+''，'，'）'，那麼它會在每一個後面加逗號。我只是希望在其他文本出現之後添加逗號。如果它變得複雜就放手吧，這並不重要 –

@ Pay4m我想這就是你想要的http://jsfiddle.net/cse_tushar/jR9G2/3/ –

是@Tushar，非常感謝你 –

嘗試

var $contriesp = $('.countries > p'); 
$('.chbxs input[type="checkbox"]').click(function(){ 
    var $chk = $(this), rel = $chk.attr('rel'); 
    if (this.checked) { 
     $('<span />', { 
      html: $chk.next('label').text() 
     }).appendTo($contriesp).attr('rel', rel) 
    } else { 
     $contriesp.children('span[rel="' + rel + '"]').remove(); 
    } 
});

演示：Fiddle

來源

2013-08-18 14:20:45

試試這個

$('.chbxs input[type="checkbox"]').click(function() { 
     var chkdChkbox = $(this).next('label').text(); 
     var chkdChkboxId = $(this).attr("id"); 
     if ($(this).prop('checked') == true) { 
      $('.countries > p').append('<span id="country_'+chkdChkboxId +'">' + chkdChkbox + '</span>'); 
     } 
     else { 
      $('.countries > p').children('#country_'+chkdChkboxId).remove(); 
     } 
    });

來源

2013-08-18 14:25:02 Farhan

切換文本，在複選框輸入更改

回答

相關問題