Question

请，建议。我想在容器标记复选框内添加标签，并通过单击每个标签的“x”按钮删除标签。一切正常，但是当你点击“x”按钮并删除标签时，复选框的状态仍然会被检查。但是我需要在你点击每个标签的按钮时，必须取消选中复选框的状态。

使用输入的值和名称可能更容易，但我不能使用它们 - 只有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

尝试

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

演示：Fiddle

Answer 2

试试这个：

<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

或请参阅此演示：http://jsfiddle.net/knYvf/

使用的API：
find：http://api.jquery.com/find/
contains：http://api.jquery.com/contains-selector/

这一行应该可以解决问题：

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

+1给你一个整洁的问题！

希望任何人都满足需要:)

<强>代码

$(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

取消选中复选框并关闭按钮

4 个答案: