通过单击链接或从复选框下拉列表中选择“全选”来全选 JQuery/Javascript答案

【问题标题】：JQuery/Javascript select-all by clicking link or selecting "select-all" from a checkbox dropdown通过单击链接或从复选框下拉列表中选择“全选”来全选 JQuery/Javascript
【发布时间】：2011-01-15 21:18:15
【问题描述】：

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

我将如何使用 jquery/javascript 做到这一点？是否有任何教程可以彻底解释这一点？我不是很擅长 javascript，但我学得很快。

我最初真的很想做一个 gmail 样式的下拉复选框，但事实证明这很困难，我认为在邮件收件箱中设置链接会更加用户友好..

【问题讨论】：

标签： php javascript jquery mysql html

【解决方案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>

【讨论】：

在未来使用jsfiddle.net 来放置示例——这不会花费您的时间，但它确实会增加其他用户的舒适度。

【解决方案2】：

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

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

【讨论】：

完美。正是我需要的。我只需要那个结合了blog.themeforest.net/tutorials/… 的网站…………无论如何现在。非常感谢

【解决方案3】：

使用jquery，然后

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

显然这只是一个示例，您不能简单地复制粘贴它，但这应该可以帮助您入门。

【讨论】：