表格内的复选框与php foreach

时间:2016-07-07 08:00:02

标签: php jquery codeigniter checkbox

我使用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) {
                        }
                    });
               }
    });
});

这里的问题是,当我选中表格第2行的复选框时,请说false,如果选中true,则if($(this).is(":checked")) 的第1行会发生更改。< / p>

虽然我已说过

#stage {
    background: url('../img/ozadje.jpg') center center no-repeat;
    background-size: cover;
    position:absolute;
    color: white;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
}


#stage-caption{
    font-size: 1.4rem;
    font-weight: 200;
    max-width: 80rem;
    margin: 0 auto;
}
#stage-caption h1{
    font-size: 3.5rem;
    color:silver;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    font-weight: bold;
    text-transform: uppercase;
    line-height: 150%;
    
        
}
#stage-caption p{
   color:silver ;
    font-size: 2.5rem;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    
}

有什么想法吗?

1 个答案:

答案 0 :(得分:3)

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

请更换代码$(&#39; .true&#39;)。attr(&#39; checked&#39;,false);使用此代码$(this).closest(&#34; td&#34;)。find(&#39; .true&#39;)。attr(&#39; checked&#39;,false);

和$(&#39; .false&#39;)。attr(&#39; checked&#39;,false);这个$(​​this).closest(&#34; td&#34;)。find(&#39; .false&#39;)。attr(&#39; checked&#39;,false);