JQuery/Javascript select-all by clicking link or selecting “select-all” from a checkbox dropdown
Question
I have a private messaging system and would like to have about 4-5 links above the inbox where a user can click if they want to "select all", "none", "favourite", "read" or "unread" messages.
How would I do this using jquery/javascript? Are there any tutorials about that explain this thoroughly? I am not that great with javascript but I'm a quick learner.
I originally really wanted to do a gmail style checkbox drop down but it is proving to be quite difficult and I think having links across of the message inbox would be more user friendly..
3 answers
solution1
2 2011-01-15 21:35:36
I hacked together a simple example of how I would do this, you will have to tailor it to your needs, but it should get you started. Just try this (make sure you change it to match your jquery library):
<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>
solution2
1 2011-01-15 21:27:33
Use jquery, then
$(".parent").find("input[type=checkbox]").each(function() {
$(this).checked = true;
});
Obviously this is just an example and you won't be able to simply copy paste this, but this should get you started.
solution3
1 ACCPTED
My solution on 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();
});
Excuse me, I am the man, who gave you fish, but did not teach you to catch fish.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.