체크 박스에 텍스트를 토글 전환 입력 변경

Question

많은 코드를 검색하여 시도했지만 & 샘플을 보았습니다. 나는 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 .: 텍스트를 쉼표로 구분하고 싶습니다.

Answer 1

. 이 시도 :

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

Answer 2

는 시도

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 텍스트 계좌로 클릭 한 모든 checkboxes 점검이 아니라 하나를 가지고 생성되도록 당신은 논리를 수정해야 할

Answer 3

이

$('.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(); 
     } 
    });