Question

我有一个私人消息系统，并且希望在收件箱上方有大约4-5个链接，用户可以点击这些链接，如果他们想要“全选”，“无”，“喜欢”，“阅读”或“未读” “消息。

我如何使用jquery / javascript执行此操作？是否有任何关于此的教程彻底解释了这一点？我用javascript并不是那么好，但我学的很快。

我原本真的很想做一个gmail风格的复选框下拉，但事实证明这很困难，而且我认为在消息收件箱中链接会更加用户友好..

Answer 1

我在一起编写了一个简单的例子，说明我将如何做到这一点，你必须根据自己的需要定制它，但它应该让你开始。试试这个（确保你改变它以匹配你的jquery库）：

<html>
<body>
<div class="mesg" id="mesg1" read="1" favorite="0">
    <input type="checkbox" name="check1">
    message 1 info
</div>
<div class="mesg" id="mesg2" read="1" favorite="1">
    <input type="checkbox" name="check2">
    message 2 info
</div>
<div class="mesg" id="mesg3" read="0" favorite="0">
    <input type="checkbox" name="check3">
    message 3 info
</div>

<input type="button" value="select read" id="select_read" />
<input type="button" value="select favorite" id="select_fav" />

<script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
     $(function() {
        $("#select_read").click(function() {
          $("div.mesg input[type=checkbox]").attr("checked", false);
          $("div.mesg[read=1] input[type=checkbox]").attr("checked", true);
       });
        $("#select_fav").click(function() {
          $("div.mesg input[type=checkbox]").attr("checked", false);
          $("div.mesg[favorite=1] input[type=checkbox]").attr("checked", true);
       });
    });
</script>
</body>
</html>

Answer 2

使用jquery，然后

$(".parent").find("input[type=checkbox]").each(function() {
    $(this).checked = true;
});

显然这只是一个例子，你不能简单地复制粘贴，但这应该让你开始。

Answer 3

我对jsFiddle的解决方案：http://www.jsfiddle.net/pereskokov/sYe4S/6/

HTML：

<p id="links">
    Select <a href="#" id="all" class="pseudo">all</a>, 
    <a href="#" id="none" class="pseudo active">none</a>, 
    <a href="#" id="unread" class="pseudo">unread</a>, 
    <a href="#" id="read" class="pseudo">read</a>, 
    <a href="#" id="fav" class="pseudo">favourite</a>
</p>
<p id="messages">
    <label class="unread">
        <input type="checkbox" name="message" value="1" class="unread" /> Hi, man!
    </label><br/>

    <label class="read fav">
        <input type="checkbox" name="message" value="2" class="read fav" /> Cute kittens, look
    </label><br/>

    <label class="read">
        <input type="checkbox" name="message" value="3" class="read" /> Pysh-pysh, ololo
    </label><br />

    <label class="unread">
        <input type="checkbox" name="message" value="4" class="unread" /> New important task!
    </label><br/>
</p>

CSS：

label.unread {
    font-weight: bold;
}

label.fav {
    background-color: #F5E942;
}

a.pseudo {
    text-decoration: none;
    border-bottom: 1px dashed #4998C9;
    color: #4998C9;
}

a.active {
    background-color: #4998C9;
    color: white;
    padding: 0 0.2em;
}

jQuery的：

$('#links').delegate('a', 'click', function(ev) {
    // reset all checkboxes
    $('input:checkbox').attr('checked', false);

    // get info, what is the user choice
    whichMessages = $(this).attr('id'); 

    // do our main work - select checkboxes
    switch (whichMessages) {
    case 'all':
        $('input:checkbox').attr('checked', true);
        break;
    case 'read':
        $('input:checkbox.read').attr('checked', true);
        break;
    case 'unread':
        $('input:checkbox.unread').attr('checked', true);
        break;
    case 'fav':
        $('input:checkbox.fav').attr('checked', true);
        break;
    };

    // add some user-frendly markup
    $('#links a').removeClass('active');
    $(this).addClass('active');

    // and standart action to prevent standart link click event
    ev.preventDefault();
});

对不起，我是那个给你鱼的人，但没有教你钓鱼。

JQuery / Javascript select-all通过单击链接或从复选框下拉列表中选择“select-all”

3 个答案:

HTML：

CSS：

jQuery的：