选中时,复选框将显示在无序列表的底部

时间:2014-03-02 02:14:57

标签: javascript jquery html html5 checkbox

http://jsfiddle.net/AGinther/ZF7bD/1/

当我使用jQuery点击一个复选框时,我试图让列表项出现在列表的底部;

HTML

<ul>
    <li><input type="checkbox" id="checkbox-1"><label for="checkbox-1"> Checkbox 1</label></li>
    <li><input type="checkbox" id="checkbox-2"><label for="checkbox-2"> Checkbox 2</label></li>
    <li><input type="checkbox" id="checkbox-3"><label for="checkbox-3"> Checkbox 3</label></li>
    <li><input type="checkbox" id="checkbox-4"><label for="checkbox-4"> Checkbox 4</label></li>
</ul>

的Javascript

if ($('input[type="checkbox"]').prop('checked')) {
     //Some code goes here...
}

1 个答案:

答案 0 :(得分:1)

首先,您需要在您的小提琴中包含jQuery作为库。此外,您的if语句不会绑定到任何事件。

您可以通过绑定到click事件的click事件来完成此操作。

$('input[type="checkbox"]').click(function() {
    var $t = $(this);
    if ($t.is(':checked')) {
        var cb = $t.parent().remove();
        $('ul').append(cb);
    }
});

演示:http://jsfiddle.net/ZF7bD/7/