Sign in to follow this  
Followers 0
ACTIONpack

can't checkbox multiply boxes Help

6 posts in this topic

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]

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0

  • Recently Browsing   0 members

    No registered users viewing this page.