jquery 링크가있는 체크 박스를 선택 취소하십시오

Question

조언을주십시오, 태그를 생성하고 싶습니다. 나는 div에 입력 필드가 있고 다른 div에는 여러 개의 확인란이 있습니다. 확인란을 눌러 태그를 추가하고 싶습니다. 태그에는 해당 태그를 제거하는 닫기 버튼이있어 특정 체크 박스의 선택을 취소합니다.

예를 들어 자동차, 패션, 의료, 교육 등의 체크 박스가 있습니다. 입력 상자에 태그를 추가하고 Enter 키를 눌러 확인란을 선택합니다.

$(document).ready(function() { 
var $list = $("#itemList"); 

$(".chkbox").change(function() { 
    var a = this.value; 
    if (this.checked) { 
     $list.append('<li><a href="#">' + a + '</a></li>'); 
    } 
    else { 
     $("#itemList li:contains('"+a+"')").remove(); 
    } 
}) 
$('div a').live('click', function(ev){ 
    alert("hi"); 
}); 


<div id="tab1" class="tab-pane"> 
    <input type="checkbox" class="chkbox" value="101"> This is 101 
    <input type="checkbox" class="chkbox" value="102"> This is 102 
    <input type="checkbox" class="chkbox" value="103"> This is 103 
    <input type="checkbox" class="chkbox" value="104"> This is 104 
</div> 
<div id="items"> 
    <ul id="itemList"> 
    </ul> 
</div> 

전조 도움말 또는 조언.

Answer 1

.change에 문제가있을 수 있습니다. 시도해보십시오.

$(document).on('click','.chkbox', function() { 
    var a = $(this).val(); 
    // same code as above 
}); 

.live는 최신 버전의 JQuery에서 더 이상 사용되지 않습니다. 그것을 사용하지 마십시오.

Answer 2

아침

는이

var $list = $("#itemList"); 

$(".chkbox").change(function() { 
    var a = this.value; 
    if (this.checked) { 
     $list.append('<li><a href="#">' + a + '</a><button class="closebutton" value="'+a+'">X</button></li>'); 
    } 
    else { 
     $("#itemList li:contains('"+a+"')").remove(); 
    } 
}) 
$(document).on('click','div a',function(ev){ 
    alert($(this).text()); 
}); 
$(document).on('click','.closebutton',function(){ 
    var b = this.value; 
    $("#itemList li:contains('"+b+"')").remove(); 
    $(".chkbox[value="+b+"]").removeAttr('checked'); 
}); 

이것은 또한 클릭 할 수 닫기 버튼 ..

http://jsfiddle.net/jDBsw/3/