通过单击链接或从复选框下拉菜单中选择" select-all“，JQuery/Javascript全选
通过单击链接或从复选框下拉菜单中选择" select-all“，JQuery/Javascript全选
提问于 2011-01-16 05:18:15
我有一个私人消息系统，并希望有大约4-5个链接以上的收件箱，在那里用户可以点击，如果他们想要“选择全部”，“无”，“最爱”，“已读”或“未读”的消息。
我该如何使用jquery/javascript来做到这一点？有没有什么教程可以彻底解释这一点呢？我对javascript不是很在行，但我学得很快。
我原本真的很想做一个gmail风格的下拉式复选框，但它被证明是相当困难的，我认为在消息收件箱中有链接会更用户友好。
回答 3
Stack Overflow用户
回答已采纳
发布于 2011-01-16 06:17:04
我在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();
});对不起，我就是那个给了你鱼，却没有教你去抓鱼的人。
Stack Overflow用户
发布于 2011-01-16 05:35:37
我拼凑了一个简单的例子来说明我将如何做到这一点，你必须根据你的需求来定制它，但它应该能让你开始。只需尝试一下(确保将其更改为与您的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>Stack Overflow用户
发布于 2011-01-16 05:27:34
使用jquery，然后
$(".parent").find("input[type=checkbox]").each(function() {
$(this).checked = true;
});显然，这只是一个示例，您不能简单地复制粘贴它，但这应该可以帮助您入门。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/4702212
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号