Question

我有这个代码，带有复选框，如果我勾选复选框，删除按钮和视图将启用，如果取消选中该框，删除按钮和查看按钮将禁用，然后我创建一个复选框，当选中所有复选框将是检查但是每行复选框的id是未定义的

我怎样才能在每一行中输入一个id？你能给我示例（仅）删除所有按钮吗？

这是我的脚本

jQuery(".checkall").click(function() {
  var checkall = jQuery(this);
  var id = checkall.attr("data-id");
  var parent = checkall.closest("tr");

  var checkbox = jQuery(".rows"); //call rows
  var id1 = checkbox.attr("data-id"); //giving id per rows
  var parent1 = checkbox.closest("tr"); //call aligned rows         
  var viewbutton = parent1.find(".view"); //finding the view links of whole line per rows
  var href = "personal_information.php?id=" + id1; //give the links with id

  var deletebutton = parent1.find(".delete");
  var href1 = "delete.php?id=" + id1;

  if (checkall.is(":checked")) {
    if (jQuery(".rows input[type='checkbox']").prop("checked", true)) {
      //    jQuery(id).each(function(){
      viewbutton.removeClass("color");
      viewbutton.attr("href", href);
      deletebutton.attr("href", href1);
      deletebutton.removeClass("gray");
    }
  } else {
    if (jQuery(".rows input[type='checkbox']").prop("checked", false)) {
      viewbutton.addClass("color");
      viewbutton.attr("href", "javascript:void(0);");
      deletebutton.attr("href", "javascript:void(0);");
      deletebutton.addClass("gray");
    }
  }
});

这是我显示ROW的代码

    <table><form>
    <tr>
        <th><input type="checkbox" class="checkall"></th>
        <th style="width:100px;"><center>Last Name</center></th>
        <th style="width:100px;"><center>First Name</center></th>
        <th style="width:auto;"><center>Email</center></th>
        <th style="width:100px;"><center>Birthday</center></th>
        <th style="width:auto;"><center>Action</center></th>
    </tr>
    <?php
    while($row = mysql_fetch_array($result))
    {
        echo "<tr class='rows' id='".$row['id']."'>";
        echo "<td>";
        echo "<input type='checkbox' data-id='".$row['id']."'>"; // data-id the id per row
        echo "<td>".$row['lastname']."</td>";
        echo "<td>".$row['firstname']."</td>";
        echo "<td>".$row['email']."</td>";
        echo "<td>".$row['bdate']."</td>";
        echo "<td><center>";
        echo "<a href='javascript:void(0);' style='text-decoration:none' class='btn delete gray'>DELETE</a> ";
        echo "<a href='javascript:void(0);' style='text-decoration:none' class='btn view color'>VIEW</a> ";
        echo "</td></center></td>";
        echo "</tr>";

    }
    ?>
</form></table>

我正在学习编程，并且我在这一点上陷入困境。

Answer 1

您可以尝试这样：

jQuery(function() {
        jQuery(".checkall").click(function() {      
            var checkall = jQuery(this);
            var allCheckboxChecked = checkall.is(":checked");               
            var allRows = jQuery("tr.rows");

            jQuery.each(allRows, function(index, row){
                var jquery_row = jQuery(row);       
                var id = jquery_row.attr("id");

                var href = "personal_information.php?id=" + id;
                var viewbutton = jquery_row.find(".view");

                var href1 = "delete.php?id=" + id;  
                var deletebutton = jquery_row.find(".delete");

                jquery_row.find("input[type='checkbox']").prop("checked", allCheckboxChecked);
                if (allCheckboxChecked) {
                    viewbutton.addClass("color");
                    viewbutton.attr("href", href);                      

                    deletebutton.addClass("gray");
                    deletebutton.attr("href", href1);
                } else {
                    viewbutton.removeClass("color");
                    viewbutton.attr("href", "javascript:void(0);");

                    deletebutton.removeClass("gray");
                    deletebutton.attr("href", "javascript:void(0);");              
                }
            });
        });
    });

Answer 2

这是我的问题的答案

jQuery(".checkall").on("click",function(){
            var checkall = jQuery(this);
            jQuery(".rows input[type='checkbox']").each(function(){
                var rows_this = jQuery(this);
                var row_id = rows_this.attr("data-id");

                var parent = rows_this.closest("tr");
                var view_button = parent.find(".view");
                var href = "personal_information.php?id=" +row_id;
                var delete_button = parent.find(".delete");
                var href1 = "delete.php?id=" +row_id;

                if(checkall.is(":checked")){
                    rows_this.prop("checked",true);
                    view_button.removeClass("color");
                    view_button.attr("href",href);
                    delete_button.attr("href",href1);
                    delete_button.removeClass("gray");
                }else{
                    rows_this.prop("checked",false);
                    view_button.addClass("color");
                    view_button.attr("href","javascript:void(0);");
                    delete_button.attr("href","javascript:void(0);");
                    delete_button.addClass("gray");
                }
            });
    });

此代码提供每行ID

带有id目标的jQuery checkall

2 个答案: