0

我有这个人名单，他们的名字旁边有复选框。当您单击复选框时，该人的姓名将添加到页面底部的空槽列表中。

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

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 id="member1" class="member"></div>

所以我想我只需要它，以便如果我删除一个填充的 div，它会获取该 div 的内容并使用它来取消选中与该内容对应的标签的复选框？有道理？

4

2 回答 2

0

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

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

$('#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()

和

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

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

这似乎适用于 jquery 1.4.4

小提琴

于 2012-06-21T15:18:41.803 回答
0

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

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

编辑：

我想我现在明白你的意思了。我的想法仍然是使用一些 attr 将插槽链接回复选框。请查看它是否按您的预期工作，http://jsfiddle.net/uNMvs/4/

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

​
于 2012-06-21T13:01:44.180 回答