Question

我有一堆复选框，我试图让de / select all按钮为他们工作。复选框通过标签设置为图像，并使用jquery slidetoggle在可扩展的div中，我使用bootstrap，不确定是否重要。

此外，复选框本身也是通过php循环制作的，因为大约有30种东西，我宁愿这样做，而不必单独做每一个，加上它意味着我可以只添加新的数据库和它作品。我这样说，因为我觉得这个php循环可能是个问题。

我当前的代码结构，包括复选框和扩展div的脚本如下：

<script> 
          $(document).ready(function(){          
            $(".fliplogo").click(function(){       
            $(".panellogo").slideToggle("slow"); 
            });
          });
        </script>

        <script>
        $(document).ready(function(){
        $('input[name="all"],input[name="title"]').bind('click', function(){
        var status = $(this).is(':checked');
        $('input[type="checkbox"]', $(this).parent('li')).attr('checked', status);
        });
        });
        </script>

        <div class="navbar navbar-inverse fliplogo" style="padding:5px; color:white">
        Car Manufacture

        </div>

          <div id="sites" class="navbar navbar-inverse panellogo" style="display:none; min-height:0px"> 
            <li>
              <input type="checkbox" name="all" id="all" style="color:white" checked/> 
                <label for='all' style="color:white">Select All Manufactures
              </label><br>

            <?php
              $webserver = 'localhost'; 
              $administrator = 'root';
              $password = '';
              $db_name = 'cdb';
              $db = mysqli_connect($webserver, $administrator, $password, $db_name)
                or die('Error connecting');

              $query = "SELECT DISTINCT make,logo FROM cars";
              $result = mysqli_query($db, $query)
                or die("Error in query: '$query'");
              $row = mysqli_fetch_assoc($result);
              $i = 0;
              while($row = mysqli_fetch_assoc($result)) 
                {
                $i++; 

                echo'                    
                    <input type="checkbox" style="display:none" id="'.$i.'" value="'.$row['make'].'" checked/>
                      <label for="'.$i.'"><img src="'.$row['logo'].'" style="height:50px; width:50px"/>
                    </label>
                    ';
                }
            ?>
            </li>
          </div>

和css：

.input_hidden {
    position: absolute;
    left: -9999px;
}

#sites label {
    display: inline-block;
    cursor: pointer;
}

#sites label:hover {
    background-color: #500000;
}

#sites label img {
    padding: 3px;    
}

input[type=checkbox]:checked + label img {
    background-color: #ccc;
}

这个小提琴显示选择我使用的所有代码：http://jsfiddle.net/H37cb/433/

这个小提琴的复选框：http://jsfiddle.net/Zgh24/1171/

即使我在我的网站上单独尝试所有内容，只需使用所有复选框中的代码，它就会起到同样的作用。无论我把代码从小提琴放在哪里，它都是一样的，只运行一次，然后停止检查/取消选中按钮将工作一次然后停止。如果它们在开始时全部被选中，它将取消选择它们，它们将选择然后取消选择......就是这样。

所有帮助非常感谢-Tom

选择所有复选框选项仅适用一次，然后无效

0 个答案: