带有php foreach的表内的复选框答案

【问题标题】：Checkboxes inside a table with php foreach带有php foreach的表内的复选框
【发布时间】：2016-07-07 08:00:02
【问题描述】：

我对使用 PHP foreach（在 codeigniter 中）创建的表有一个非常简单的问题。

表格内的一列有 2 个复选框。一个true 和一个false 所以当我创建表时有一些名称和信息，然后是2 个复选框。每当用户单击true 时，我都会创建一个对我的数据库的 AJAX POST 调用以更改列的状态。但是当用户点击true然后他点击false我希望true复选框被取消选中。

这里是代码

<table class="responstable">  
  <tr>  
    <th>ID</th>
    <th><span>Name</span></th>
    <th>number1</th>
    <th>number2</th>
  </tr>

  <?php
  foreach($students as $column => $data ) { ?>
  <tr>    
    <td><?php echo $data[0]->Userproperties_UserAM; ?></td>
    <td><?php echo $data[0]->Userproperties_UserFullName; ?></td>
    <td><?php echo $data[0]->UserAbsence; ?></td>
    <td> <input class="true" id="<?php echo $data[0]->Userproperties_UserId; ?>" type='checkbox' value="<?php echo $data[0]->Userproperties_UserAM; ?>" />
  <label for='true'>
    <span></span>
    True    
  </label>  
  <input class="false" id="<?php echo $data[0]->Userproperties_UserId; ?>" type='checkbox' value="<?php echo $data[0]->Userproperties_UserAM; ?>" />
  <label for='false'>
    <span></span>
    False  
  </label></td>
  </tr>
<?php   } ?>
</table>

还有ajax代码

$(document).ready(function() {
    $('.true').change(function() {
       if($(this).is(":checked")) {
           $('.false').attr('checked', false);
                  var moduleid = <?php echo $moduleid; ?>;
                  var teacherid = <?php echo $teacherid; ?>;
                    var studentid = $(this).attr('id');
                    var weeknum = $("#dropi").val();
                    jQuery.ajax({
                        type: "POST",
                        url: "<?php echo base_url(); ?>" + "index.php/TeacherParousies/send_parousia",
                        data: {
                            moduleid: moduleid,
                            studentid: studentid,
                            teacherid: teacherid,
                            parousia: 1,
                            weeknum: weeknum
                        },
                        success: function(res) {
                        },
                        error: function(err) {
                        }
                    });
                } 
           });
           $('.false').change(function() {
               if($(this).is(":checked")) {
                $('.true').attr('checked', false);
                  var moduleid = <?php echo $moduleid; ?>;
                  var teacherid = <?php echo $teacherid; ?>;
                    var studentid = $(this).attr('id');
                    var weeknum = $("#dropi").val();
                    jQuery.ajax({
                        type: "POST",
                        url: "<?php echo base_url(); ?>" + "index.php/TeacherParousies/send_parousia",
                        data: {
                            moduleid: moduleid,
                            studentid: studentid,
                            teacherid: teacherid,
                            parousia: 0,
                            weeknum: weeknum
                        },
                        success: function(res) {
                        },
                        error: function(err) {
                        }
                    });
               }
    });
});

这里的问题是，当我检查表格复选框的第二行时，可以说false，如果选中，true 的第一行会发生变化。

虽然我说过

if($(this).is(":checked"))

有什么想法吗？

【问题讨论】：

您考虑过使用单选按钮吗？
@ymas nop 我只是想知道为什么它没有取消选中它自己的行的复选框并且它也更改了所有其他行。我知道它是因为class，但我应该怎么做才能使它与我现有的代码一起工作？我想我会遇到和上面的代码一样的问题。
它会更改其他行，因为类名用于选中和取消选中复选框并且类不是唯一标识符。不要使用类名，而是使用 Ids 。
正如您所提到的，您的问题是选择器过于笼统。在此处阅读有关“上下文”的部分：api.jquery.com/jQuery 看看您是否可以弄清楚如何限制选择器。如果您无法弄清楚，请告诉我，我会为您做一个示例，但您应该能够弄清楚:)
问题出在你的 $('.false').attr('checked', false);和 $('.true').attr('checked', false);他们正在取消选中包含包含的所有复选框。

标签： php jquery codeigniter checkbox

【解决方案1】：

在您的情况下， .false 和 .true 将取消选中所有选项。您只需要检查最近的元素。

请替换代码 $('.true').attr('checked', false);使用此代码 $(this).closest("td").find('.true').attr('checked', false);

对 $('.false').attr('checked', false); 做同样的事情这 $(this).closest("td").find('.false').attr('checked', false);

【讨论】：