取消选中带有关闭按钮的复选框

Question

Please, advice. I want to add tags inside the container marking checkboxes and remove tags by clicking on the "x" button of each tag. Everything works fine except that when you click on the "x" button and tags are removed the state of the checkbox remains checked. But I need that when you click on the button of each tag the state of the checkbox must be unchecked.

It might be easier to do with the value and the name of input, but I can't use them - only id.

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

    $(".chkbox").change(function() {
        var a = $('label[for="' + this.id + '"]').text();
            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','.closebutton',function(){
       var b = this.value;
       $("#itemList li:contains('"+b+"')").remove();
        $('label[for="' + this.id + '"]').removeAttr('checked');        
        });
    });

    <div id="items">
        <ul id="itemList">
        </ul>
    </div>
    <div id="tab1" class="tab-pane">
    <div id="ck-button"><label for="one"><input type="checkbox" id="one" class="chkbox"><span>First book</span></label> </div>
    <div id="ck-button"><label for="two"><input type="checkbox" class="chkbox" id="two"><span>  Second book</span></label> </div>
    </div>

Answer 1

Try

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

    $(".chkbox").change(function () {
        var a = $(this).next().text();
        if (this.checked) {
            $('<li><a href="#">' + a + '</a><button class="closebutton" value="' + a + '">X</button></li>').appendTo($list).data('src', this);

        } else {
            $("#itemList li:contains('" + a + "')").remove();
        }
    })
    $(document).on('click', '.closebutton', function () {
        var $li = $(this).closest('li');
        $($li.data('src')).prop('checked', false);
        $li.remove();
    });
});

Demo: Fiddle

Answer 2

Try this:

<div id="items">
    <ul id="itemList">
    </ul>
</div>
<div id="tab1" class="tab-pane">
    <div id="ck-button1"><label for="one"><input type="checkbox" id="one" class="chkbox"><span>First book</span></label>
    </div>
    <div id="ck-button2">
        <label for="two"><input type="checkbox" class="chkbox" id="two"><span> Second book</span></label></div>
</div>
</body>
<script>
    $(document).ready(function()
    {
        var $list = $("#itemList");
        $(".chkbox").change(function()
        {
            var a = $('label[for="'+this.id+'"]').text();
            var t = this.id;
            if(this.checked)
            {
                $list.append('<li><a href="#">'+a+'</a><button class="closebutton" title="'+t+'" value="'+a+'">X</button></li>');
            }
            else
            {
                $("#itemList li:contains('"+a+"')").remove();
            }
        })
        $(document).on('click', '.closebutton', function()
        {
            var b = this.value;
            var q = this;
            $("#itemList li:contains('"+b+"')").remove();
            $('#'+this.title).removeAttr('checked');
        });
    });
</script>

Answer 3

Or See this demo: http://jsfiddle.net/knYvf/

• API used:
• find : http://api.jquery.com/find/
• contains : http://api.jquery.com/contains-selector/

This line should do the trick:

    $('label:contains("' + b + '")').find('.chkbox').prop('checked', false);

+1 to you for neat question as well!

Hope any will suffice the need :)

Code

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

    $(".chkbox").change(function () {
        var a = $('label[for="' + this.id + '"]').text();
        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', '.closebutton', function () {
        var b = this.value;
        $("#itemList li:contains('" + b + "')").remove();
        $('label:contains("' + b + '")').find('.chkbox').prop('checked', false);
    });
});

Answer 4

<div id="items">
<ul id="itemList"></ul>
</div>
<div id="tab1" class="tab-pane">
<div id="ck-button">

     <!--html code should be like this no need to add span-->

    <input type="checkbox" id="one" class="chkbox"/> 
    <label for="one">First book</label>
</div>
<div id="ck-button">

    <input type="checkbox" class="chkbox" id="two" />
    <label for="two">  Second book</label>
</div>

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

$(".chkbox").change(function () {
var a = $('label[for="' + this.id + '"]').text();
var name=$(this).attr('id');
if (this.checked) {
    //add name attribute in the button with the id of checkbox
    $list.append('<li><a href="#">' + a + '</a> 
<button class="closebutton" value="' + a + '" name="'+name+'">X</button></li>');
} else {
    $("#itemList li:contains('" + a + "')").remove();
}
})

$(document).on('click', '.closebutton', function () {
var b = this.value;

$("#itemList li:contains('" + b + "')").remove();
//remove the checkbox whose id is same as the name attribute of button
$(':checkbox[id="' + this.name + '"]').removeAttr('checked');
});

DEMO