I'm still really new to jQuery, and Javascript as a whole. Hopefully I can describe what I'm trying to do well enough that someone can help! So this example isn't exactly what I'm going to be using the code for, but it will cross over just fine.
I have a list of musicians, and each <li> has a class of what each person plays, whether it's vocals, drums, guitar, etc. Each person can have multiple classes, ie someone can be vocals and also guitar. I also have multiple input checkboxs one for each position. They each have a id=drum, vocals, bass, respectively. What I want to have happen is when, for example, you check vocals, it will show only the people who are vocalists, or if you were to click bass and guitar, it would show all the people who play bass and guitar. I have an idea of how you would do this, I'm just having a little trouble implementing it.
I would prefer using jQuery, as I am a little more versed in it.
Code:
$(document).ready(function(){
$('input[type=checkbox]').click(function(){
/* now it needs something that sees which checkboxs are checked
and get the ids of those, then it needs to hide all of the li that
do not have class's equal to the ids, if that makes any sense*/
//I know this doesn't work, but it made logical sense to me
var position = $('input[type=checkbox]').is(':checked').attr('id');
$('ul#positions li').hasClass(!=position).hide();
});
});
I am new to Jquery.
If I understand I try this code:
Code:
$(document).ready(function(){
$('ul#positions li').hide();
$('input[type=checkbox]').click(function(){
var thisid= $(this).attr('id');
//alert($(this).is(':checked') );
if($(this).is(':checked')==true) {
alert("this is checked");
$('ul#positions li.'+thisid).show();
}
if($(this).is(':checked')==false) {
alert("this is not checked");
$('ul#positions li.'+thisid).hide();
}
});
});
The Time Through Ages
In the Name of Allah, Most Gracious, Most Merciful
1. By the Time,
2. Verily Man is in loss,
3. Except such as have Faith, and do righteous deeds, and (join together) in the mutual enjoining of Truth, and of Patience and Constancy.
1. When none of the checkboxs are checked, I want it to show all of the li, for some reason it defaults to hide all of them.
2. When multiple checkboxs are checked, I want it to only show the ones that have the ones that apply. For example, if vocals and keyboard are checked, it should only show David Crowder.
Thanks, for the work though, you at least have a good start,
I think what's going to have to happen is, each time you run the input[type=checkbox].click(function) it will have to check which of the checkboxs are check, and get those id's (in an array, I have no clue, I'm really a n00b) and run them against the li that have the same classes and the id's, hopefully that makes since.
I was able to answer my first question, I just removed the second line of code (I'm not that much of a n00b!).
$(document).ready(function(){
$('input[type=checkbox]').click(function(){
$('ul#positions li').show();
var C = $('input[type=checkbox]');
//alert(C);
var L = C.length;
//alert(L);
var checkedids= [];
for(var i=0; i < L; i++) {
if( $(C[i]).is(':checked')==true) { checkedids[checkedids.length]= $(C[i]).attr('id');}
}
//alert(checkedids);
var showli=[];
var hideli=[];
var li= $('ul#positions li');
var n;
for(var k=0; k< li.length; k++) {
n=0
for(var m=0; m < checkedids.length; m++) {
if($(li[k]).hasClass(checkedids[m])== true) { n++; }
}
if(n== checkedids.length) { showli[showli.length]=k; };
if(n!= checkedids.length) { hideli[hideli.length]=k; };
}
//alert("showli= "+showli +"\n hideli = " +hideli);
for(var p=0; p< hideli.length; p++) {
$(li[hideli[p]]).hide();
}
});
});
Last edited by Ayşe; 01-23-2012 at 02:20 PM.
The Time Through Ages
In the Name of Allah, Most Gracious, Most Merciful
1. By the Time,
2. Verily Man is in loss,
3. Except such as have Faith, and do righteous deeds, and (join together) in the mutual enjoining of Truth, and of Patience and Constancy.
Wow, you're amazing, thanks, works perfectly! The only thing I'm wondering is if there is a way that the li that are remaining go to the top, because right now when you hide some, the ones remaining stay where there were. Maybe it's my browser version, or maybe it's because it is an ul. I tried testing it on my own by giving a li display: none; and it does the same thing, so I don't think it's your code. Does it do the same thing to you? Any ideas?
$(document).ready(function(){
$('input[type=checkbox]').click(function(){
var C = $('input[type=checkbox]');
var L = C.length;
var checkedids= [];
for(var i=0; i < L; i++) {
if( $(C[i]).is(':checked')==true) {
checkedids[checkedids.length]= $(C[i]).attr('id');
}
}
var li= $('ul#positions li');
var n;
for(var k=0; k< li.length; k++) {
n=0
for(var m=0; m < checkedids.length; m++) {
if($(li[k]).hasClass(checkedids[m])== true) { n++; }
}
if(n== checkedids.length) { $(li[k]).show(); };
if(n!= checkedids.length) { $(li[k]).hide(); };
}
});
});
Last edited by Ayşe; 01-23-2012 at 06:17 PM.
The Time Through Ages
In the Name of Allah, Most Gracious, Most Merciful
1. By the Time,
2. Verily Man is in loss,
3. Except such as have Faith, and do righteous deeds, and (join together) in the mutual enjoining of Truth, and of Patience and Constancy.
Yeah, you're right, the br were messing it up. The simple version worked well on my home computer, using the newest version of jQuery, but the computer system where I'm actually going to be using this code, it didn't work. The computers at work are on a closed network, and version 1.3 (or 1.2.3, can't remember) is what I'm limited to. I'm not sure if there is a comparability issue, but I'll try the other code and see if it works. Either way, thanks so much for your help.
$(document).ready(function(){
$('input[type=checkbox]').click(function(){
$('ul#positions li').show();
var c = $('input[type=checkbox]:checked');
// alert(c.length);
var str = "";
for(var i=0; i< c.length; i++) {
var myid= $(c[i]).attr('id');
if(str.indexOf(myid)==-1) { str += "."+myid;}
}
// alert(str);
$('ul#positions li:not('+str+')' ).hide();
//$('ul#positions li:('+str +')').show();
});
});
Last edited by Ayşe; 01-27-2012 at 11:41 AM.
The Time Through Ages
In the Name of Allah, Most Gracious, Most Merciful
1. By the Time,
2. Verily Man is in loss,
3. Except such as have Faith, and do righteous deeds, and (join together) in the mutual enjoining of Truth, and of Patience and Constancy.
Reply With Quote
Bookmarks