www.webdeveloper.com
Results 1 to 9 of 9

Thread: jQuery checkbox list help

  1. #1
    Join Date
    Aug 2008
    Posts
    34

    jQuery checkbox list help

    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.

    Here is the HTML I'm using:
    HTML Code:
    <html>
    <head>
    <title>Test</title>
    <link rel="stylesheet" href="style.css" type="text/css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
    </head>
    <body>
    
    <input type="checkbox" id="vocals" /> Vocals
    <br />
    <input type="checkbox" id="rapper" /> Rapper
    <br />
    <input type="checkbox" id="drums" /> Drums
    <br />
    <input type="checkbox" id="guitar" /> Guitar
    <br />
    <input type="checkbox" id="bass" /> Bass
    <br />
    <input type="checkbox" id="keyboard" /> Keyboard
    <br />
    <input type="checkbox" id="dj" /> DJ
    <br />
    
    <ul id="positions">
    
    <li class="vocals rapper">
    Name: Eminem
    <br />
    Position: Vocals, Rapper
    </li><br />
    
    <li class="vocals rapper">
    Name: Will.i.am
    <br />
    Position: Vocals, Rapper
    </li><br />
    
    <li class="guitar">
    Name: Chet Atkins
    <br />
    Position: Guitar
    </li><br />
    
    <li class="drums">
    Name: John Bonham
    <br />
    Position: Drums
    </li><br />
    
    <li class="vocals">
    Name: Josh Groban
    <br />
    Position: Vocals
    </li><br />
    
    <li class="dj">
    Name: Paul Oakenfold
    <br />
    Position: DJ
    </li><br />
    
    <li class="vocals guitar keyboard">
    Name: David Crowder
    <br />
    Position: Vocals, Guitar, Keyboard
    </li><br />
    
    <li class="vocals bass">
    Name: John Cooper
    <br />
    Position: Vocals, Bass
    </li>
    
    </ul>
    </body>
    </html>
    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();
    	});
    
    });
    Any help would be much appreciated,

    Thanks!

  2. #2
    Join Date
    Sep 2007
    Posts
    315
    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();
    } 
    });
    });
    Bismillahirrahmanirrahîm
    Hamd, Âlemlerin Rabbi, Rahmân, Rahîm, hesap ve ceza gününün (ahiret gününün) maliki Allah'a mahsustur. (Allahım!) Yalnız sana ibadet ederiz ve yalnız senden yardım dileriz. Bizi doğru yola, kendilerine nimet verdiklerinin yoluna ilet; gazaba uğrayanların ve sapıklarınkine değil.

  3. #3
    Join Date
    Aug 2008
    Posts
    34
    Well close, a couple things:

    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,

    Thanks again, good work!

  4. #4
    Join Date
    Aug 2008
    Posts
    34
    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!).

  5. #5
    Join Date
    Sep 2007
    Posts
    315
    try this:
    Code:
    $(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.
    Bismillahirrahmanirrahîm
    Hamd, Âlemlerin Rabbi, Rahmân, Rahîm, hesap ve ceza gününün (ahiret gününün) maliki Allah'a mahsustur. (Allahım!) Yalnız sana ibadet ederiz ve yalnız senden yardım dileriz. Bizi doğru yola, kendilerine nimet verdiklerinin yoluna ilet; gazaba uğrayanların ve sapıklarınkine değil.

  6. #6
    Join Date
    Aug 2008
    Posts
    34
    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?

  7. #7
    Join Date
    Sep 2007
    Posts
    315
    I wrote
    </li>
    instead of
    </li><br />


    simple code
    Code:
     
    $(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.
    Bismillahirrahmanirrahîm
    Hamd, Âlemlerin Rabbi, Rahmân, Rahîm, hesap ve ceza gününün (ahiret gününün) maliki Allah'a mahsustur. (Allahım!) Yalnız sana ibadet ederiz ve yalnız senden yardım dileriz. Bizi doğru yola, kendilerine nimet verdiklerinin yoluna ilet; gazaba uğrayanların ve sapıklarınkine değil.

  8. #8
    Join Date
    Aug 2008
    Posts
    34
    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.

  9. #9
    Join Date
    Sep 2007
    Posts
    315
    The code is working in Firefox 4.0b9 and Konqueror 4.5.5
    I use http://code.jquery.com/jquery-1.7.1.min.js
    Code:
      
    $(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.
    Bismillahirrahmanirrahîm
    Hamd, Âlemlerin Rabbi, Rahmân, Rahîm, hesap ve ceza gününün (ahiret gününün) maliki Allah'a mahsustur. (Allahım!) Yalnız sana ibadet ederiz ve yalnız senden yardım dileriz. Bizi doğru yola, kendilerine nimet verdiklerinin yoluna ilet; gazaba uğrayanların ve sapıklarınkine değil.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles