<分区>
HTML 通过 php 回显。 html 页面显示一个表，该表在每行末尾都有复选框，以便可以选择多行。下面给出的是这样做的 HTML。 HTML 通过 PHP 回显，因为这需要对许多行重复:
foreach ($_SESSION['userdata'] as $row)
{
echo '
<tr>
<td style="vertical-align: middle; text-align: center;">'.$row['Symbol'].'</td>
<td style="vertical-align: middle; text-align: center;">'.$row['Name'].'</td>
<td style="vertical-align: middle; text-align: center;">'.$row['MarketCap'].'</td>
<td style="vertical-align:
<td style="vertical-align: middle; text-align: center;">
<input type="checkbox" name="stocks[]" value="'.$row['Symbol'].'">
<label></label>
</td>
</tr>
';
}
echo '<tr>
<td style="vertical-align: middle; text-align: center; float: right;"><input type="submit" name="submit" value="Select"/></td>
</tr>
</form>';
复选框的 CSS 如下:
input[type="checkbox"],
input[type="radio"] {
-moz-appearance: none;
-webkit-appearance: none;
-ms-appearance: none;
appearance: none;
display: block;
float: left;
margin-right: -2em;
opacity: 0;
width: 1em;
z-index: -1;
}
input[type="checkbox"] + label,
input[type="radio"] + label {
text-decoration: none;
color: #ffffff;
cursor: pointer;
display: inline-block;
font-size: 1em;
font-family: "Source Sans Pro", Helvetica, sans-serif;
text-transform: none;
letter-spacing: 0;
font-weight: 300;
padding-left: 2.4em;
padding-right: 0.75em;
position: relative;
}
input[type="checkbox"] + label:before,
input[type="radio"] + label:before {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-transform: none !important;
}
input[type="checkbox"] + label:before,
input[type="radio"] + label:before {
background: rgba(255, 255, 255, 0.025);
border-radius: 5px;
border: solid 2px rgba(255, 255, 255, 0.125);
content: '';
display: inline-block;
height: 1.65em;
left: 0;
line-height: 1.58125em;
position: absolute;
text-align: center;
top: 0;
width: 1.65em;
}
input[type="checkbox"]:checked + label:before,
input[type="radio"]:checked + label:before {
background: #ffffff;
border-color: #ffffff;
content: '\f00c';
color: #2e3141;
}
最佳答案
将代码的第一个 CSS 部分替换为:
input[type="checkbox"],
input[type="radio"] {
display: block;
margin-right: -2em;
opacity: 100;
width: 1em;
z-index: -1;
}
工作 JSFiddle 链接:https://jsfiddle.net/tL7uvgu0/2/
关于php - HTML 中的复选框不起作用。单击复选框时没有任何反应。如何让它发挥作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36705438/