我有这30个复选框的页面。这些都是安排座位。现在,我想他们的风格。
.seatlayout{
border: 1px solid;
display: table;
width: 30%;
padding: 6% 2% 0% 2%;
border-radius: 5%;
}
.seat{
position: relative;
width: 22%;
margin-bottom: 10%;
float: left;
text-align: center;
border: 1px solid #ccc;
}
[class*='seatcont'],
.seatdis{
position: relative;
width: 100%;
height: 100%;
}
[class^="seatcon"] label,
.seatdis label{
background-color: #f1f2ed;
cursor: pointer;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
[class^="seatcon"] input[type="checkbox"] ,
.seatdis input[type="checkbox"] {
z-index:10
}
[class^="seatcon"] input[type="checkbox"]:checked + label
{
background-color: #66bb6a;
}
.seatdis input[type="checkbox"]:checked + label{
background-color: grey;
pointer-events: none
}
[class^="seatcon"] input[type="checkbox"]:checked +
label:after {
opacity: 1;
}
<div class="seatlayout">
<div class="seat">
<div class="seatcont1">
<input type="checkbox id="checkbox">
<label for="checkbox" id="lab1">
</div>
</div>
<div class="seat">
<div class="seatcont2">
<input type="checkbox id="checkbox">
<label for="checkbox" id="lab2">
</div>
</div>
<div class="seat">
<div class="seatcont3">
<input type="checkbox id="checkbox">
<label for="checkbox" id="lab3">
</div>
</div>
</div>
问题无论在哪个座位我点击,它总是checkes第一个。我试了几种方法添加独特的类别和标识的使用通配符工作时。任何帮助将非常apprieciated!
你必须为每一个复选框相同的ID。您应该使用一个唯一的ID为每一个。
你把相同的ID在所有的复选框。你需要给他们所有不同的ID。此外,你缺少的类型后,所有的复选框的结束报价。
<input type="checkbox" id="checkbox">
<label for="checkbox" id="lab1">
....
<input type="checkbox" id="checkbox2">
<label for="checkbox2" id="lab1">
有许多东西是错误的。该label
元素永远不会关闭。该label
元素并不需要一个id
它是需要匹配for
的ID input
属性。第二复选框的input
从未由"
关闭。第三id
总是需要是唯一的,这是一个独特的identifier。因此每个输入需要有自己独特的ID。
.seatlayout{
border: 1px solid;
display: table;
width: 30%;
padding: 6% 2% 0% 2%;
border-radius: 5%;
}
.seat{
position: relative;
width: 22%;
margin-bottom: 10%;
float: left;
text-align: center;
border: 1px solid #ccc;
}
[class*='seatcont'],
.seatdis{
position: relative;
width: 100%;
height: 100%;
}
[class^="seatcon"] label,
.seatdis label{
background-color: #f1f2ed;
cursor: pointer;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
[class^="seatcon"] input[type="checkbox"] ,
.seatdis input[type="checkbox"] {
z-index:10
}
[class^="seatcon"] input[type="checkbox"]:checked + label
{
background-color: #66bb6a;
}
.seatdis input[type="checkbox"]:checked + label{
background-color: grey;
pointer-events: none
}
[class^="seatcon"] input[type="checkbox"]:checked +
label:after {
opacity: 1;
}
<div class="seatlayout">
<div class="seat">
<div class="seatcont1">
<input type="checkbox" id="checkbox1">
<label for="checkbox1"> 1</label>
</div>
</div>
<div class="seat">
<div class="seatcont2">
<input type="checkbox" id="checkbox2">
<label for="checkbox2"> 2</label>
</div>
</div>
<div class="seat">
<div class="seatcont3">
<input type="checkbox" id="checkbox3">
<label for="checkbox3"> 3</label>
</div>
</div>
</div>