• 0

can't checkbox multiply boxes Help

Asked by ACTIONpack,

 Share

Question

Grand Master

ACTIONpack

Posted
Posted

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>
[/CODE]

[CODE]
#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;
}
[/CODE]

Link to comment
Share on other sites

5 answers to this question

Recommended Posts

  • 0
Grand Master

Kami-

Posted
Posted

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.

Link to comment
Share on other sites
  • 0
Grand Master

Dick Montage

Posted
Posted

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!

Link to comment
Share on other sites
  • 0
Proficient

EddieF

Posted
Posted (edited)

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
Link to comment
Share on other sites
  • 0
Proficient

EddieF

Posted
Posted

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

Link to comment
Share on other sites
  • 0
Grand Master

The_Decryptor Veteran

Posted
  • Veteran
Posted

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?

Link to comment
Share on other sites
This topic is now closed to further replies.
 Share
Go to question listing

  • Recently Browsing   0 members

    • No registered users viewing this page.