Fatal编程技术网
  • php/
  • Php JQuery/Javascript通过单击链接或从复选框下拉列表中选择“全选”来全选

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

php javascript jquery mysql html

Php JQuery/Javascript通过单击链接或从复选框下拉列表中选择“全选”来全选,php,javascript,jquery,mysql,html,Php,Javascript,Jquery,Mysql,Html,我有一个私人信息系统，希望在收件箱上方有大约4-5个链接，如果用户希望选择全部、无、收藏夹、已读或未读邮件，可以单击该链接 如何使用jquery/javascript实现这一点？有没有关于这方面的教程详细解释？我并不擅长javascript，但我学得很快 我本来真的很想做一个gmail风格的复选框下拉列表，但事实证明这是相当困难的，而且我认为在邮件收件箱中有链接会更方便用户。那么就使用jquery吧 $(".parent").find("input[type=checkbox]").each(f

我有一个私人信息系统，希望在收件箱上方有大约4-5个链接，如果用户希望选择全部、无、收藏夹、已读或未读邮件，可以单击该链接

如何使用jquery/javascript实现这一点？有没有关于这方面的教程详细解释？我并不擅长javascript，但我学得很快

我本来真的很想做一个gmail风格的复选框下拉列表，但事实证明这是相当困难的，而且我认为在邮件收件箱中有链接会更方便用户。

那么就使用jquery吧

$(".parent").find("input[type=checkbox]").each(function() {
    $(this).checked = true;
});
显然，这只是一个示例，您不能简单地复制粘贴它，但这应该让您开始了。

然后使用jquery

$(".parent").find("input[type=checkbox]").each(function() {
    $(this).checked = true;
});
很明显，这只是一个示例，您不能简单地复制粘贴它，但这应该可以让您开始。

我拼凑了一个简单的示例，说明我将如何做到这一点，您必须根据您的需要进行调整，但这应该可以让您开始。 只需尝试此操作，确保将其更改为与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>
我拼凑了一个简单的例子来说明我是如何做到这一点的，你必须根据自己的需要进行调整，但这应该会让你开始。 只需尝试此操作，确保将其更改为与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>
我在JSFIDLE上的解决方案：

HTML: jQuery： 对不起，我就是那个人，他给了你鱼，但没有教你捕鱼。

我在JSFIDLE上的解决方案：

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