Jump to content



Photo

can't checkbox multiply boxes Help


  • Please log in to reply
5 replies to this topic

#1 ACTIONpack

ACTIONpack

    Graphic Designer

  • Tech Issues Solved: 1
  • Joined: 10-August 03
  • Location: Lawrenceville, GA
  • OS: Windows 8.1 Pro
  • Phone: Nokia Lumia 925 (T-Mobile)

Posted 03 April 2013 - 21:58

For some reason I can't checkbox multiply boxes in my drop down menu. Why is that?

www.romabio.com/products/index1.html

<div id="dropDown2">
		   
			    <ul>
			   
				    <li>Interior
				   
					    <ul class="filter_2">
					   
						    <li>
	    <div class="squaredThree">
		 <input type="checkbox" value="c1" id="squaredThree" name="check" />
		 <label for="squaredThree"><em>Floors</em></label>
	    </div>
						    </li>
						    <li>
	    <div class="squaredThree">
		 <input type="checkbox" value="c2" id="squaredThree" name="check" />
		 <label for="squaredThree"><em>Stains</em></label>
	    </div>
						    </li>
						    <li>
	    <div class="squaredThree">
		 <input type="checkbox" value="c3" id="squaredThree" name="check" />
		 <label for="squaredThree"><em>Trims</em></label>
	    </div>
						    </li>
						    <li>
	    <div class="squaredThree">
		 <input type="checkbox" value="c4" id="squaredThree" name="check" />
		 <label for="squaredThree"><em>Varnishes</em></label>
	    </div>
						    </li>
						    <li>
	    <div class="squaredThree">
		 <input type="checkbox" value="c5" id="squaredThree" name="check" />
		 <label for="squaredThree"><em>Walls</em></label>
	    </div>
						    </li>
						    <li>
	    <div class="squaredThree">
		 <input type="checkbox" value="c6" id="squaredThree" name="check" />
		 <label for="squaredThree"><em>Woods</em></label>
	    </div>
							   
						    </li>
						   
					    </ul>
				    </li>
				   
				    <li>Exterior
				   
					    <ul class="filter_2">
					   
						    <li>
	    <div class="squaredThree">
		 <input type="checkbox" value="c1" id="squaredThree" name="check" />
		 <label for="squaredThree"><em>Floors</em></label>
	    </div>
						    </li>
						    <li>
	    <div class="squaredThree">
		 <input type="checkbox" value="c2" id="squaredThree" name="check" />
		 <label for="squaredThree"><em>Stains</em></label>
	    </div>
						    </li>
						    <li>
	    <div class="squaredThree">
		 <input type="checkbox" value="c3" id="squaredThree" name="check" />
		 <label for="squaredThree"><em>Trims</em></label>
	    </div>
						    </li>
						    <li>
	    <div class="squaredThree">
		 <input type="checkbox" value="c4" id="squaredThree" name="check" />
		 <label for="squaredThree"><em>Varnishes</em></label>
	    </div>
						    </li>
						    <li>
	    <div class="squaredThree">
		 <input type="checkbox" value="c5" id="squaredThree" name="check" />
		 <label for="squaredThree"><em>Walls</em></label>
	    </div>
						    </li>
						    <li>
	    <div class="squaredThree">
		 <input type="checkbox" value="c6" id="squaredThree" name="check" />
		 <label for="squaredThree"><em>Woods</em></label>
	    </div>
							   
						    </li>
						   
					    </ul>
					   
				    </li>
				   
			    </ul>
		   
		    </div>

#dropDown2 {
width: 300px;
height: 40px;
font: bold 14px "Ubuntu", Helvetica, sans-serif;
color: black;
list-style: none;
padding: 0;
z-index: 1000;
float: left;
-webkit-touch-action: double-tap-zoom;
-moz-touch-action:  double-tap-zoom;
-ms-touch-action:  double-tap-zoom;
touch-action:   double-tap-zoom;
}
#dropDown2 li {
width: 100px;
float: left;
position: relative;
padding: 0 15px;
line-height: 40px;
background: url(../images/dropDown-arrow.png) no-repeat 100px 17px;
border: 1px solid #CCC;
}
#dropDown2 li li {
font-weight: normal;
color: #666;
}
#dropDown2 li li input[type="checkbox"] {
    display: none;
}
#dropDown2 li li input[type="checkbox"] + label span {
    display: inline-block;
    width: 19px;
    height: 19px;
    margin: -1px 4px 0 0;
    vertical-align: middle;
    background: url(../images/checkSheet.png) left top no-repeat;
    cursor: pointer;
}
#dropDown2 li li input[type="checkbox"]:checked + label span {
    background: url(../images/checkSheet.png) -19px top no-repeat;
}

#dropDown2 li:nth-child(1) {
z-index: 99999;
-webkit-border-radius: 5px 0px 0px 5px;
-moz-border-radius:  5px 0px 0px 5px;
border-radius:   5px 0px 0px 5px;
}
#dropDown2 li:nth-child(2) {
border-left: 1px solid white;
-webkit-border-radius: 0px 5px 5px 0px;
-moz-border-radius:  0px 5px 5px 0px;
border-radius:   0px 5px 5px 0px;
}
#dropDown2 li li:nth-child(2) {
border-left: 1px solid black;
}
#dropDown2 li:hover {
background: url(../images/dropDownon-arrow.png) no-repeat 100px 17px;
color: #999;
background-color: black;
border: 1px solid black;
-webkit-border-radius: 5px 5px 0 0;
-moz-border-radius:  5px 5px 0 0;
border-radius:   5px 5px 0 0;

-webkit-box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, .5);
-moz-box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, .5);
box-shadow:   0px 0px 8px 1px rgba(0, 0, 0, .5);
}
#dropDown2 li a {
display: block;
padding: 0 15px;
text-decoration: none;
}
#dropDown2 li a:hover {
background: none;
-webkit-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, .0);
box-shadow:   0px 0px 0px 0px rgba(0, 0, 0, .0);
}
#dropDown2 li ul {
opacity: 0;
position: absolute;
left: -1px;
width: 132px;
background-image: none;
background-color: black;
padding: 0;
margin: 0;
z-index: 1000;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius:  0 0 5px 5px;
border-radius:   0 0 5px 5px;
}
#dropDown2 li:hover ul {
opacity: 1;
background-image: none;
-webkit-box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, .5);
-moz-box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, .5);
box-shadow:   0px 0px 8px 1px rgba(0, 0, 0, .5);
}
#dropDown2 li ul li {
float: none;
position: static;
height: 0;
line-height: 0;
background-image: none;
border: 1px solid black;
-webkit-border-radius: 0;
-moz-border-radius:  0;
border-radius:   0;
}
#dropDown2 li ul li:last-child {
float: none;
position: static;
height: 0;
line-height: 0;
padding: 0 0 7px 16px;
background: none;
border: 0;
-webkit-border-radius: 0px 0px 5px 5px;
-moz-border-radius:  0px 0px 5px 5px;
border-radius:   0px 0px 5px 5px;
}
#dropDown2 li:hover ul li {
height: 30px;
line-height: 30px;
background-image: none;
-webkit-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, .0);
-moz-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, .0);
box-shadow:   0px 0px 0px 0px rgba(0, 0, 0, .0);
}
#dropDown2 li:hover:nth-child(1) {
-webkit-border-radius: 5px 0px 0px 0px;
-moz-border-radius:  5px 0px 0px 0px;
border-radius:   5px 0px 0px 0px;
}
#dropDown2 li:hover:nth-child(2) {
-webkit-border-radius: 0px 5px 0px 0px;
-moz-border-radius:  0px 5px 0px 0px;
border-radius:   0px 5px 0px 0px;
}
#dropDown2 li li a {
font-size: 13px;
font-weight: normal;
color: #666;
margin: 0 -16px;
padding: 0 16px;
border: 0;
background-image: none;
}
#dropDown2 li li a:hover {
background: #121212;
color: white;
margin: 0 -16px;
padding: 0 16px;
border: 0;
background-image: none;
-webkit-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, .0);
-moz-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, .0);
box-shadow:   0px 0px 0px 0px rgba(0, 0, 0, .0);
}
#dropDown2 li {
-webkit-transition: all 200ms;
-moz-transition: all 200ms;
transition:   all 200ms;
}
#dropDown2 li a {
-webkit-transition: all 500ms;
-moz-transition: all 500ms;
transition:   all 500ms;
}
#dropDown2 li li a {
-webkit-transition: all 250ms;
-moz-transition: all 250ms;
transition:   all 250ms;
}
#dropDown2 li ul {
-webkit-transition: all 1000ms;
-moz-transition: all 1000ms;
transition:   all 1000ms;
}
#dropDown2 li ul li {
-webkit-transition: height 500ms;
-moz-transition: height 500ms;
transition:   height 500ms;
}

/* SQUARED THREE */
.squaredThree {
width: 15px;
margin: 15px auto;
position: relative;
}
.squaredThree label {
cursor: pointer;
position: absolute;
width: 15px;
height: 15px;
top: 0px;
left: -45px;
border-radius: 3px;
-webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,.4);
-moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,.4);
box-shadow:   inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,.4);
background: -webkit-linear-gradient(top, #222 0%, #45484d 100%);
background: -moz-linear-gradient(top, #222 0%, #45484d 100%);
background: -o-linear-gradient(top, #222 0%, #45484d 100%);
background: -ms-linear-gradient(top, #222 0%, #45484d 100%);
background: linear-gradient(top, #222 0%, #45484d 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222', endColorstr='#45484d',GradientType=0 );
}
.squaredThree label em {
position: relative;
left: 23px;
top: -6px;
}
.squaredThree label:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
content: '';
position: absolute;
width: 9px;
height: 5px;
background: transparent;
top: 4px;
left: 4px;
border: 3px solid #fcfff4;
border-top: none;
border-right: none;
-webkit-transform: rotate(-45deg);
-moz-transform:  rotate(-45deg);
-ms-transform:  rotate(-45deg);
transform:   rotate(-45deg);
}
.squaredThree label:hover::after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
opacity: 0.3;
}
.squaredThree input[type=checkbox]:checked + label:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}



#2 Kami-

Kami-

    ♫ d(-_-)b ♫

  • Tech Issues Solved: 2
  • Joined: 28-July 08
  • Location: SandBox

Posted 04 April 2013 - 10:25

Too lazy to look more into this, but ID on a checkbox is optional (mandatory for accessibility) - but should be unique if used, name can be the same so long as value is different.

#3 +Nik L

Nik L

    Where's my pants?

  • Tech Issues Solved: 2
  • Joined: 14-January 03

Posted 04 April 2013 - 10:28

All your IDs are exactly the same. No idea if this is related (I'm guessing not by the way the problem behaves) but it's incredibly wrong!

#4 EddieF

EddieF

    Neowinian

  • Joined: 04-November 02
  • Location: Ohio/Michigan border
  • OS: Win 7
  • Phone: Droid Razr

Posted 06 April 2013 - 02:14

Concur with the two posts above about IDs..


Edit:

Nevermind.. this is too messy for me. See post below for a possible fix

Edited by EddieF, 06 April 2013 - 02:33.


#5 EddieF

EddieF

    Neowinian

  • Joined: 04-November 02
  • Location: Ohio/Michigan border
  • OS: Win 7
  • Phone: Droid Razr

Posted 06 April 2013 - 02:22

You aren't using labels properly. Labels require unique IDs (IDs should ALWAYS be unique anyways), otherwise they are trying to bind to .. well everything in your case. In my browser clicking anything checks the first one, because it is the first occurrence of the ID and EVERY label refers to it.

http://www.w3schools...s/tag_label.asp

#6 The_Decryptor

The_Decryptor

    STEAL THE DECLARATION OF INDEPENDENCE

  • Tech Issues Solved: 5
  • Joined: 28-September 02
  • Location: Sol System
  • OS: iSymbian 9.2 SP24.8 Mars Bar

Posted 06 April 2013 - 03:41

Pretty sure it's because you're using the same "name" for each checkbox. How can it say you've checked 1,2 and 4, when they all point to the same value?