HTML中的复选框不起作用.单击复选框时不会发生任何事情.如何使其发挥作用


The checkbox in HTML is not working. Nothing happens when the checkbox is clicked. How to make it work?

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中删除一些代码才能使其工作

将代码的第一个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/