The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Adding Individual "select all" button in HTMl, Adding Individual "select all" button in HTMl
Pervez
post Aug 1 2012, 02:56 AM
Post #1





Group: Members
Posts: 1
Joined: 1-August 12
Member No.: 17,529
<html>
<head>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<style>
.plusimageapply{
list-style-image:url(plus.png);
cursor:pointer;
}
.minusimageapply{
list-style-image:url(minus.png);
cursor:pointer;
}
.selectedimage{
list-style-image:url(selected.png);
cursor:pointer;
}
</style>
</head>
<body>
<div id="a">
<ul>
<li class="category">Abortion<ul>
<input type="checkbox" id="selectall"/>Select All<br />
<input type="checkbox" class="case" name="case" value="1"/>abortion:Abortion information excluding when related to religion<br />
</li>
</ul>
</div>

<div id="b"><ul><li class="category">Ads<ul>
<input type="checkbox" id="selectall"/>Select All<br />
<input type="checkbox" class="case" name="case" value="1"/>ads:Advert servers and banned URLs<br />
</li></ul></div>

<div><ul><li class="category">News And Media<ul>
<input type="checkbox" class="case" name="case" value="1"/>news:News sites<br />
<input type="checkbox" class="case" name="case" value="1"/>culnary:Sites about cooking et al<br />
<input type="checkbox" class="case" name="case" value="1"/>entertainment:Sites that promote movies, books, magazine, humor<br />
<input type="checkbox" class="case" name="case" value="1"/>gambling:Gambling sites including stocks and shares<br />
<input type="checkbox" class="case" name="case" value="1"/>radio:non-news related radio and television<br />
<input type="checkbox" class="case" name="case" value="1"/>weather:Weather news sites and weather related<br />
</ul></div>

<div><ul><li class="category">Education<ul>
<input type="checkbox" class="case" name="case" value="1"/>frencheducation:Sites to do with french education<br />
</li></ul></div>

<div><ul><li class="category">Games<ul>
<input type="checkbox" class="case" name="case" value="1"/>sportnews:Sport news sites<br />
<input type="checkbox" class="case" name="case" value="1"/>sports :All sport sites<br />
<input type="checkbox" class="case" name="case" value="1"/>onlinegames :Online gaming sites<br />
<input type="checkbox" class="case" name="case" value="1"/>games:Game related sites<br />
</li></ul></div>

<div><ul><li class="category">Social Networking<ul>
<input type="checkbox" class="case" name="case" value="1"/>dating:Sites about dating<br />
<input type="checkbox" class="case" name="case" value="1"/>mail :Webmail and email sites<br />
<input type="checkbox" class="case" name="case" value="1"/>news :News sites<br />
<input type="checkbox" class="case" name="case" value="1"/>socialnetworking:Social networking websites<br />
<input type="checkbox" class="case" name="case" value="1"/>instantmessaging:Sites that contain messenger client download and web-based messaging sites<br />
</li></ul></div>

<div><ul><li class="category">Shopping<ul>
<input type="checkbox" class="case" name="case" value="1"/>ecommerce:Sites that provide online shopping<br />
<input type="checkbox" class="case" name="case" value="1"/>shopping:Shopping sites<br />
</li></ul></div>

<div><ul><li class="category">News And Media<ul>
<input type="checkbox" class="case" name="case" value="1"/>weather:Weather news sites and weather related<br />
<input type="checkbox" class="case" name="case" value="1"/>gambling:Gambling sites including stocks and shares<br />
<input type="checkbox" class="case" name="case" value="1"/>news :News sites<br />
<input type="checkbox" class="case" name="case" value="1"/>radio :non-news related radio and television<br />
<input type="checkbox" class="case" name="case" value="1"/>radio :non-news related radio and television<br />
</li></ul></div>

<div><ul><li class="category">Adult<ul>
<input type="checkbox" class="case" name="case" value="1"/>adult:Sites containing adult material such as swearing but not porn<br />
<input type="checkbox" class="case" name="case" value="1"/>artnudes:Art sites containing artistic nudity<br />
<input type="checkbox" class="case" name="case" value="1"/>porn:Pornography<br />
<input type="checkbox" class="case" name="case" value="1"/>sexuality:Sites dedicated to sexuality, possibly including adult material
<br />
<input type="checkbox" class="case" name="case" value="1"/>mixed_adult Mixed adult content sites<br />
</li></ul></div>

<div><ul><li class="category">Spyware<ul>
<input type="checkbox" class="case" name="case" value="1"/>antispyware:Sites that remove spyware<br />
</li></ul></div>

<div><ul><li class="category">Banking<ul>
<input type="checkbox" class="case" name="case" value="1"/>banking:Banking websites<br />
</li></ul></div>

<div><ul><li class="category">Blog<ul>
<input type="checkbox" class="case" name="case" value="1"/>blog:Journal/Diary websites<br />
</li></ul></div>

<div><ul><li class="category">Kids<ul>
<input type="checkbox" class="case" name="case" value="1"/>childcare:Sites to do with childcare<br />
<input type="checkbox" class="case" name="case" value="1"/>kidstimewasting:Sites kids often waste time on<br />
</li></ul></div>

<div><ul><li class="category">Blog<ul>
<input type="checkbox" class="case" name="case" value="1"/>blog:Journal/Diary websites<br />
</li></ul></div>

<div><ul><li class="category">Job Search<ul>
<input type="checkbox" class="case" name="case" value="1"/>jobsearch:Sites for finding jobs<br />
</li></ul></div>

<div><ul><li class="category">Travel<ul>
<input type="checkbox" class="case" name="case" value="1"/>blog:Journal/Diary websites<br />
</li></ul></div>

<script type="text/javascript">
$(document).ready(function() {
$('li.category').addClass('plusimageapply');
$('li.category').children().addClass('selectedimage');
$('li.category').children().hide();
$('li.category').each(
function(column) {
$(this).click(function(event){
if (this == event.target) {
if($(this).is('.plusimageapply')) {
$(this).children().show();
$(this).removeClass('plusimageapply');
$(this).addClass('minusimageapply');
}
else
{
$(this).children().hide();
$(this).removeClass('minusimageapply');
$(this).addClass('plusimageapply');
}
}
});
}
);
});
</script>
<script type="text/javascript" >
$(function(){
$("#selectall").click(function () {
$('#a .case').attr('checked', this.checked);
});
$("#a .case").click(function(){

if($("#a .case").length == $("#a .case:checked").length) {
$("#selectall").attr("checked", "checked");
} else {
$("#selectall").removeAttr("checked");
}
});
})
</script>
<script type="text/javascript" >
$(function(){
$("#selectall").click(function () {
$('.case').attr('checked', this.checked);
});
$(".case").click(function(){

if($(".case").length == $(".case:checked").length) {
$("#selectall").attr("checked", "checked");
} else {
$("#selectall").removeAttr("checked");
}
});
})
</script>

</body>
</html>
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------


I want to include "select all" check box in individual categories.......I spent lot of time for this but am not getting .

PLease help me for this problem.


Pervez
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 1 2012, 06:58 AM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 13,791
Joined: 9-August 06
Member No.: 6
Can't help. jQuery isn't my bag of tea. But I move this to the client-side scripting forum so it's more likely someone in the know sees it.


--------------------
"Never go to excess, but let moderation be your guide."
- Cicero
IPB Image
User is online!PM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Aug 1 2012, 07:56 AM
Post #3


Programming Fanatic
********

Group: Members
Posts: 3,583
Joined: 23-August 06
From: Europe
Member No.: 9
Try searching for "jquery select all checkboxes".


--------------------
"The earth does not belong to us. We belong to the earth."
from Vue du ciel (in French)

"Leave scepticism to others and take action"
from HOME by Goodplanet

An inconvenient truth by Al Gore
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Client-side Scripting · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 18th June 2013 - 12:59 AM
Invision Power Board © 2013  IPS, Inc.
Licensed to: HTMLHelp.com, LLC