时间戳

首页 > 解决方案 > 如何让带有css样式的复选框在php的循环中工作

php - 如何让带有css样式的复选框在php的循环中工作

问题描述

我试图通过foreach 循环使用带有 css 样式的复选框传递五个数组数据。

我的问题是只有第一个复选框切换按钮工作正常。当我尝试移动第二条记录的开关复选框时，它只会移动/切换第一条记录的复选框。

我想问题必须是根据将checkboxThreeInput css 类设置为 id 参数。

id="checkboxThreeInput"

如果我尝试将它设置为一个类，它根本不起作用。

class="checkboxThreeInput"

这是代码

<!doctype html>
<html>
    <head> 
<style>
input[type=checkbox] {
    visibility: hidden;
}
/**
 * Checkbox Three
 */
.checkboxThree {
    width: 80px;
    height: 40px;
    background: #333;
    margin: 20px 60px;
    border-radius: 50px;
    position: relative;
}
/**
 * Create the text for the On position
 */
.checkboxThree:before {
    content: 'no';
    position: absolute;
    top: 12px;
    left: 13px;
    height: 2px;
    color: #26ca28;
    font-size: 16px;
}
/**
 * Create the label for the off position
 */
.checkboxThree:after {
    content: 'yes';
    position: absolute;
    top: 12px;
    left: 44px;
    height: 2px;
    color: #111;
    font-size: 16px;
} 
/**
 * Create the pill to click
 */
.checkboxThree label {
    display: block;
    width: 32px;
    height: 22px;
    border-radius: 20px;

    transition: all .5s ease;
    cursor: pointer;
    position: absolute;
    top: 9px;
    z-index: 1;
    left: 8px;
    background: yellow;
}

/**
 * Create the checkbox event for the label
 */
.checkboxThree input[type=checkbox]:checked + label {
    left: 40px;
    background: #26ca28;

}


</style> 
    </head>
    <body>
        <div class='container'>

           <?php
         $array = array( 1, 2, 3, 4, 5);
         foreach( $array as $id ) {
                ?>
                    <div id='tr_<?= $id ?>'>
        <div class="checkboxThree">
        <input type="checkbox" id="checkboxThreeInput"/>
        <label for="checkboxThreeInput"></label>
  <?php echo $id;  ?>
    </div>
                   </div>
                <?php  
                }
                ?>
        </div>
    </body>
</html>

标签： phpcss

解决方案

试试这个。每个复选框必须有一个标识符

<body>
        <div class='container'>

           <?php
         $array = array( 1, 2, 3, 4, 5);
         foreach( $array as $id ) {
                ?>
                    <div id='tr_<?= $id ?>'>
        <div class="checkboxThree">
        <input type="checkbox" id="checkboxThreeInput_<?php echo $id; ?>"/>
        <label for="checkboxThreeInput_<?php echo $id; ?>"></label>
  <?php echo $id;  ?>
    </div>
                   </div>
                <?php  
                }
                ?>
        </div>
    </body>

推荐阅读