www.webdeveloper.com
Results 1 to 7 of 7

Thread: Multiple Checkbox filter

  1. #1
    Join Date
    Oct 2010
    Posts
    5

    Multiple Checkbox filter

    Hello,

    This is my first post here. I am trying to make a multiple checkbox filter. It works by selecting/unselecting checkboxes the divs with classes revered to the checkboxes will activate deactivate.

    This is the javascript I founded on the net:
    Code:
    <script type="text/javascript"> 
    	$(document).ready(function(){
    		$("#events li."+$("input.type_check").attr('id')).addClass('type_hidden');
    		$("#events li."+$("input.type_check").attr('id')).slideUp();
    		$("#events li."+$("input.start_check").attr('id')).addClass('type_hidden');
    		$("#events li."+$("input.start_check").attr('id')).slideUp();
    		$("#events li."+$("input.place_check").attr('id')).addClass('type_hidden');
    		$("#events li."+$("input.place_check").attr('id')).slideUp();
    
    		$("input.type_check").click(function() {
    		$("input.type_check").attr('checked');
    			if($(this).is(':checked')) {
    				$("#events li."+$(this).attr('id')).removeClass('type_hidden');
    				$("#events li").not(".type_hidden, .start_hidden, .place_hidden").slideDown();
    			} else {
    				$("#events li."+$(this).attr('id')).addClass('type_hidden');
    				$("#events li."+$(this).attr('id')).slideUp();
    			}
    		});
    
    		$("input.start_check").click(function() {
    		$("input.start_check").attr('checked');		
    			if($(this).is(':checked')) {
    				$("#events li."+$(this).attr('id')).removeClass('start_hidden');
    				$("#events li").not(".type_hidden, .start_hidden, .place_hidden").slideDown();
    			} else {
    				$("#events li."+$(this).attr('id')).addClass('start_hidden');
    				$("#events li."+$(this).attr('id')).slideUp();
    			}
    		});
    		$("input.place_check").click(function() {
    		$("input.place_check").attr('checked');
    			if($(this).is(':checked')) {
    				$("#events li."+$(this).attr('id')).removeClass('place_hidden');
    				$("#events li").not(".type_hidden, .start_hidden, .place_hidden").slideDown();
    			} else {
    				$("#events li."+$(this).attr('id')).addClass('place_hidden');
    				$("#events li."+$(this).attr('id')).slideUp();
    			}
    		});
    	});
    </script>
    To see it working online look here:
    http://dev.darrenhall.info/temp/stac.../jqueryfilter/

    There two problems.
    I want to replace the sliding effect. I want to make a table with the divs in it. And when a div is deactivated the text or image shows grey and the link is disabled and when activated the text/image shows black/color and the link is enabled. So when you uncheck/check the boxes the divs will toggle between the two styles clickable and unclickable.

    Problem two: I also want to make a second checkbox/radio row with different css styles to choose from. When a style is selected and you click on a link in div it will send you to the page with the selected style. Is this possible to make? and if so can you help me with this?

    Please reply if you have any ideas, tips or questions.

    Thanx,

  2. #2
    Join Date
    Oct 2010
    Posts
    5

    Load dynamic CSS with radiobuttons

    Hello,
    I am on my way with the Checkbox filter and it seems to work properly.
    Still there I need a dynamic CSS loader with radiobuttons.
    I want to make 3 radio buttons that stands for 3 different styles. When you select a radiobutton and click on the link to go to the next page the selected css must be activated in the next page. So the selected CSS must be send with the link and pushed in the next html page, so that it loads with the selected style.

    Does anyone know how to do this? I really appreciated that.
    there is a switcher app:
    http://www.dynamicdrive.com/dynamici...etswitcher.htm
    But this works immediately when a checkbox/radiobutton is selected. But I want the css to be activated when a link is clicked. So first select a style then click on the "go to page" link, only then the css style must be activated in the next page.

    I hope someone has some suggestions/tips/know how.

    Thnx

  3. #3
    Join Date
    Oct 2010
    Posts
    5
    Can anyone help or reply me with some tips? That would be great.

  4. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,255
    Can you pass the CSS style name to the 'next page' using a querystring?

    That way you could call the second script that changes immediately, but not until the first is activated with a radio button click that would pass the style selected.

  5. #5
    Join Date
    Oct 2010
    Posts
    5
    Ok thanx for the reply. If I get it correctly I must do this with the link.
    <a href="link.htm?<%= Request.QueryString("radiobtnname") %>" target="_blank">
    or
    <a href="link.htm?radiobtn_name=("radiobtnname")" target="_blank">

    And what will put in the next page?
    this?: <link href=<%= Request.QueryString("radiobtnname") %> rel="stylesheet" type="text/css" />

    I hope you can give some more tips or details, thanx for the help.

  6. #6
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,255

    Exclamation

    Quote Originally Posted by RHA View Post
    Ok thanx for the reply. If I get it correctly I must do this with the link.
    <a href="link.htm?<%= Request.QueryString("radiobtnname") %>" target="_blank">
    or
    <a href="link.htm?radiobtn_name=("radiobtnname")" target="_blank">

    And what will put in the next page?
    this?: <link href=<%= Request.QueryString("radiobtnname") %> rel="stylesheet" type="text/css" />

    I hope you can give some more tips or details, thanx for the help.
    I don't know how much help I can be with your problem.
    I code mostly in HTML and JS, but your script appears to me to be PHP.
    I only know enough of PHP to recognize the tags.
    Sorry , I'm sure some others on the forum may be of more help in this area.

  7. #7
    Join Date
    Oct 2010
    Posts
    5
    Thanx for the relpy and help. Can anyone else help me with this? who has knowledge of php or this problem? many thanx

Thread Information

Users Browsing this Thread

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

Tags for this Thread

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