Javascript jQuery在PHP foreach'；s环

我有一个javascript脚本，它允许同时选中两个具有相同值的复选框，但它不起作用

由于php的foreach循环，我从数据库中获得了值。以下是我的测试代码：

    <?php
            //checkboxes
            foreach($host1 as $row){
                echo'<input type="checkbox" name="list[]" value="'.$row['table'].'">';
            }
            foreach($host1 as $row){
                echo'<input type="checkbox" name="list[]" value="'.$row['table'].'">';
            }
           //script
           foreach($host1 as $row){ ?>
            <script type="text/javascript">
           var $checkboxes = $("input[type=checkbox][name='list[]'][value='<?php echo $row['table']?>']");
                $checkboxes.on("click", function() {
                var checkedState = this.checked
                $checkboxes.each(function() {
                    this.checked = checkedState;
            });
           });
            </script>
<?php    }

var$复选框=$（“输入[type=checkbox][name='list[]'][value=''']”）；
$checkbox.on（“单击”，函数（）{
var checkedState=this.checked
$复选框。每个（函数（）{
this.checked=checkedState；
});
});
让jQuery处理以下内容，而不是执行php循环并分别分配每个单击事件：

// this selector should get all your checkboxes
var checkboxes = $("input[type=checkbox][name='list[]']");

checkboxes.click(function() {
     // not sure what you are trying to do here but it just looks like you are trying to set all checkboxes to the same state as the current one
     checkboxes.prop('checked', this.checked);
});

更新

由于只有两个同名复选框列表，因此我显示了它们是否具有不同的父元素或相同的父元素的选项

JS:

var list=$（'.parent元素'）.find（“输入[type=checkbox][name='list[]']”），
list1=$（'.parent-element1'）.find（“输入[type=checkbox][name='list[]”）；
列表。单击（函数（）{
var复选框=$（此），
thisIndex=list.index（复选框）；
列表1.eq（thisIndex）.prop（'checked'，this.checked）；
//如果可能的话，我会使用上面的索引来更改其他列表中相应的复选框。
//如果所有复选框都在同一个父项下，那么您将只有列表（不需要列表1）
//它将包含所有子项，因此要获得相应的索引，您需要执行以下操作：
var thisIndex=list.index（复选框）+（list.length/2）；
list.eq（thisIndex）.prop（'checked'，this.checked）；
});
让jQuery处理以下内容，而不是执行php循环并分别分配每个单击事件：

// this selector should get all your checkboxes
var checkboxes = $("input[type=checkbox][name='list[]']");

checkboxes.click(function() {
     // not sure what you are trying to do here but it just looks like you are trying to set all checkboxes to the same state as the current one
     checkboxes.prop('checked', this.checked);
});

更新

由于只有两个同名复选框列表，因此我显示了它们是否具有不同的父元素或相同的父元素的选项

JS:

var list=$（'.parent元素'）.find（“输入[type=checkbox][name='list[]']”），
list1=$（'.parent-element1'）.find（“输入[type=checkbox][name='list[]”）；
列表。单击（函数（）{
var复选框=$（此），
thisIndex=list.index（复选框）；
列表1.eq（thisIndex）.prop（'checked'，this.checked）；
//如果可能的话，我会使用上面的索引来更改其他列表中相应的复选框。
//如果所有复选框都在同一个父项下，那么您将只有列表（不需要列表1）
//它将包含所有子项，因此要获得相应的索引，您需要执行以下操作：
var thisIndex=list.index（复选框）+（list.length/2）；
list.eq（thisIndex）.prop（'checked'，this.checked）；
});
您应该试试这个。我想这就是你想要的

<?php
//checkboxes
foreach ($host1 as $row) {
    echo'<input class="my_cb" type="checkbox" name="list[]" value="' . $row['table'] . '"/>';
}
foreach ($host1 as $row) {
    echo'<input class="my_cb" type="checkbox" name="list[]" value="' . $row['table'] . '"/>';
}
//script
?>
<script type = "text/javascript">
    $(document).ready(function () {

        $(".my_cb").on("click", function () {
            var val = $(this).val();
            var checkboxes = $("input[type=checkbox][name='list[]'][value='"+val+"']");
            var checkedState = this.checked;
            checkboxes.each(function () {
                this.checked = checkedState;
            });

        });
    });
</script>


$（文档）.ready（函数（）{
$（.my_cb”）。在（“单击”，函数（）{
var val=$（this.val（）；
var复选框=$（“输入[type=checkbox][name='list[]'][value='”+val+']）；
var checkedState=this.checked；
复选框。每个（函数（）{
this.checked=checkedState；
});
});
});
您应该试试这个。我想这就是你想要的

<?php
//checkboxes
foreach ($host1 as $row) {
    echo'<input class="my_cb" type="checkbox" name="list[]" value="' . $row['table'] . '"/>';
}
foreach ($host1 as $row) {
    echo'<input class="my_cb" type="checkbox" name="list[]" value="' . $row['table'] . '"/>';
}
//script
?>
<script type = "text/javascript">
    $(document).ready(function () {

        $(".my_cb").on("click", function () {
            var val = $(this).val();
            var checkboxes = $("input[type=checkbox][name='list[]'][value='"+val+"']");
            var checkedState = this.checked;
            checkboxes.each(function () {
                this.checked = checkedState;
            });

        });
    });
</script>


$（文档）.ready（函数（）{
$（.my_cb”）。在（“单击”，函数（）{
var val=$（this.val（）；
var复选框=$（“输入[type=checkbox][name='list[]'][value='”+val+']）；
var checkedState=this.checked；
复选框。每个（函数（）{
this.checked=checkedState；
});
});
});
您确定要在PHP循环中添加javascript吗？您添加相同的JS
n
的次数。为什么有两个php foreach循环？foreach的要点是使用foreach循环遍历每个项。为什么不在输入类型复选框中使用class属性？javascript在做什么？你有一个循环，所以每次交互都会覆盖复选框。您也会多次绑定到该事件，但由于最终使用PHP输出所有事件，因此只绑定一次。如果将呈现的html添加到jsfiddle.net上的示例中，我们可能会很快发现您的问题所在。您确定要将javascript添加到PHP循环中吗？您添加相同的JS
n
的次数。为什么有两个php foreach循环？foreach的要点是使用foreach循环遍历每个项。为什么不在输入类型复选框中使用class属性？javascript在做什么？你有一个循环，所以每次交互都会覆盖复选框。您也会多次绑定到该事件，但由于最终使用PHP输出所有事件，因此只会绑定一次。如果您将呈现的html添加到jsfiddle.net上的示例中，我们可能会很快发现您的问题所在。嘿，我不想检查所有问题。我想通过值来检查它们，所以我的代码示例同时使用2。这就是为什么我需要foreach循环，因为值来自一个dbI我猜你没有正确编写循环，那么第二个复选框列表是否有不同的名称？没有相同的名称，当我使用数组时会出现问题。可能是你从数据库中提取的值与你想象的不同，你尝试过var_dump（）吗？那么您将使用相同的名称复选框并发布相同的值两次？没有任何意义，如果其他复选框具有相同的值，那么最终可能会出现4个具有相同值的复选框，会发生什么情况？这些复选框列表在页面的不同部分是否具有不同的父元素？嘿，我不想全部选中。我想通过值来检查它们，所以我的代码示例同时使用2。这就是为什么我需要foreach循环，因为值来自一个dbI我猜你没有正确地编写循环，那么第二个复选框列表有不同的名称吗？没有相同的名称，问题就来了