Javascript 函数取消选中与div元素相关的复选框？

我有一张名单，名单上的人的名字旁边有复选框。单击复选框时，该人员的姓名将添加到页面底部的空插槽列表中

空槽列表只是带边框的空div。默认数字是6。但是我已经做了这两个简单的函数来添加和删除插槽，如果用户需要的话。它们看起来像这样：

function addSlot() {
    var count = jQuery('.member').length;
    var div_id = count + 1;
    $("#list").append("<div id ='member" + div_id + "' class='member'></div>");
}

function removeSlot() {
    var div_id = jQuery('.member').length;
    $('#member' + div_id + '').remove();
}

所以是的，它们很基本。现在我不能做的一件棘手的事情是，如果你删除了一个有名字的插槽，相应的复选框就会被取消选中。不确定这有多可行。下面是我的“人”和“槽”的样子：

<input type='checkbox' name='check[]' id='159' value='159' /><label for='159'>John Smith</label>

及

---

所以我想我只需要它，这样如果我删除一个填充的div，它就会获取该div的内容，并使用它取消选中与该内容对应的复选框who's label？这有意义吗？

如果是我来实现它，我想我会选择这个解决方案

$('input[type=checkbox]').change(function(){
    var $t = $(this), id = $t.attr('id'), $list = $('#list');
    if($t.is(':checked')){
        $list.append("<div class='member' data-id='" + id + "'></div>");
    }
})

function removeSlot(){
    var $t = $('.member').eq(-1), id = $t.attr('data-id');
    $('#' + id).attr('checked', false);
    $t.remove();
}

编辑：

我想我现在明白你的意思了。我的想法仍然是使用一些属性将插槽链接回复选框。请看它是否如您所期望的那样工作

---

我试过你的小提琴，但有些功能不起作用：

我改变了一些部分，比如：

$('#add').click(function(){
    var count = $('.member').length;
    var div_id = count + 1;
    $("#list").append("<div id ='member" + div_id + "' class='member'></div>");
});

$('#remove').click(function(){
    $('.member:last').remove();
});

替换函数addSlot和函数removeSlot

及

这似乎适用于jQuery1.4.4

---

你能分享一些你已经拥有的js代码吗，或者在这里设置一个工作的小提琴，这样我们就可以玩你的代码了。@j08691，Opps，我下意识地键入了这个，谢谢，修复了这个问题。你可以将相应的id添加到div的属性中，比如rel或title或其他什么，然后在你需要的时候抓住它。这是一把非常基本的小提琴，你可以用它来做你想做的事。点击下面的名字，它将取消选中上面的复选框。好的，这是我的小提琴。由于某些原因，我的“添加”和“删除”按钮在其中不起作用。谢谢你的回答。这是在替换我的addSlot函数和removeSlot函数，还是只是我的removeSlot？很抱歉，这个jQuery有点超出我的理解。是的，我假设您在取消选中复选框时需要删除一个插槽？不，很抱歉，由于我文档其余部分的体系结构，这可能会让用户感到困惑。只需要这样，如果我删除一个填充的div，它就会获取该div的内容，并使用它取消选中与该内容对应的复选框who's label？有意义吗？我用你编辑的代码替换了removeSlot函数。我想我保留了我的地址槽。我可能错了，因为盒子似乎没有被勾选对不起，但是你可能需要为插槽分配id。作为$list.append；哈哈，出于某种原因，这些功能在我的电脑上是可以工作的，只是不在小提琴上。我遇到的真正问题是，如果你删除了一个有他们名字的插槽，就取消勾选这个人的名字。是的，但我没有太多时间来测试取消勾选复选框，我写这篇文章是为了更好地工作-您好，这是因为函数addSlot位于JSFIDLE中的闭包中，所以您无法从外部看到它，因为您选择了“onDomReady”作为脚本的位置。因此，onclick='addSlot'将失败。

var $list = $('#list');

$list.find('.member').attr('data-id', '-1');

$('input:checkbox').change(function(){
   var $t = $(this), $lbl = $t.next(), 
       text = $lbl.html(), id = $t.attr('id');

    if($t.is(':checked')){
        $slot = $list.find('.member[data-id=-1]').eq(0);
        if($slot.size()) $slot.html(text).attr('data-id', id);
        else {
            alert('Please add another slot first');
            $t.attr('checked', false);            
        }
    } else {
        $list.find('.member[data-id=' + id + ']').attr('data-id', '-1').empty();
    }
});

$('#addSlot').click(function () {
    $list.append("<div data-id='-1' class='member'></div>");
})

$('#removeSlot').click(function () {
    var $slot = $list.find('.member').eq(-1);
    $('#' + $slot.attr('data-id')).attr('checked', false);
    $slot.remove();
})

​

$('#add').click(function(){
    var count = $('.member').length;
    var div_id = count + 1;
    $("#list").append("<div id ='member" + div_id + "' class='member'></div>");
});

$('#remove').click(function(){
    $('.member:last').remove();
});

<input type="button" id="add" value="Addslot" /><br />

<input type="button" value="RemoveSlot" id="remove" /><br />