如果没有选中复选框，JavaScript 将在点击事件上发出警报

Question

一切正常，除非我检查所有行并尝试使用按钮删除它们。

我在删除按钮中放置了一个警报，该按钮测试是否选中了任何行，因此当我单击该按钮并且没有选中任何框时，它会显示警报。

此外，当选中所有复选框后，我该如何更改它或将其放在哪里？ 我是 JavaScript 和 php 新手。

或者我可以将其更改为删除确认警报吗!

这是我的代码。

<script>

function checkUncheckAll(){
var chks = document.getElementsByName("ck");
if(document.getElementById("ck_All").checked)
    {
        $("#delete_link").on("click" , deleteSelectedRows);
        for( i = 0;i < chks.length;i++)
            document.getElementsByName("ck")[i].checked = true;
    }
else {
            for( i = 0;i < chks.length;i++)
            document.getElementsByName("ck")[i].checked = false;
            document.getElementById("delete_link").onclick = function(){deleteSelectedRows();};
    }
}
function selectUnselect(checked){
if(!checked)
    document.getElementById("ck_All").checked = false;
else {
        document.getElementById("delete_link").onclick = function(){deleteSelectedRows();};
        var chks = $("input[name='ck']");
        var all_checked = true;
        for(i=0;i<chks.length;i++)
            if(chks[i].checked)
                continue;
            else {all_checked = false; break;}
        if(all_checked)
            document.getElementById("ck_All").checked = true;
     }
}
function deleteSelectedRows(){
    var cks = $("input[name='ck']");
    var checked = [];
    for(i = 0;i<cks.length;i++)
        if(cks[i].checked)
            checked.push(cks[i].parentNode.parentNode.id);

    var jsonob = JSON.stringify(checked);
    $.post("deletecom.php" , {rows_to_be_deleted:jsonob} , function(data){
        for(i=0;i<checked.length;i++)
            $("#" + checked[i]).fadeOut('slow' , function(){$(this).remove();});
        });
    }
    </script>


<a id="delete_link" onclick="alert('Aucune case n est cochée')">Supprimer</a>
<br><br>

<?php
    $con = new mysqli('localhost' , 'root' , 'etud' , 'responses');

    echo "<div id='divtable'>";
    echo '<table class="table" >';
    echo '<tr id="throws"> 
        <th><input id="ck_All" type="checkbox" onchange="checkUncheckAll()" />Select</th>
        <th>Nom</th>
         <th>Email</th>
         <th>Sujet</th>
         <th>Messages</th>
          <th>Date Creation</th>';

 // if (isset($_POST['date'])& isset($_POST['btncherche'])) {
    error_reporting(E_PARSE);
    $datechoosen=$_POST['date'];
    $result = $con->query("select * from tb_cform where datecreation='".$datechoosen."'");   
    while($row = $result->fetch_assoc())
        echo '<tr id="' . $row['id'] . '">
            <td><input name="ck" onchange="selectUnselect(this.checked)" type = "checkbox" /></td>
            <td>' . $row["u_name"] .'</td>
            <td> '. $row["u_email"] . '</td>' .  
            '<td>' . $row["subj"] . '</td>' .
            '<td>' . $row["message"] . '</td>' .
            '<td>' . $row["datecreation"] . '</td>' .
            '</tr>';

    echo '</table>';
    echo "</div>";

/*  }else{
        echo "veuillez choisir la date S.V.P !";

    }*/
 ?>

当我单击删除按钮时，无论情况如何，警报都会持续显示，请帮助我!

Answer 1

我必须指出的一件事是，最好将点击事件处理程序保留在 HTML 之外，并与 JavaScript 的其余部分捆绑在一起，请参阅 Why is using onClick() in HTML a bad practice? .

请参阅我在 JSFiddle 上的工作示例:https://jsfiddle.net/fL91x2am/23/

工作代码:

<script>
    function deleteSelectedRows(){
    var cks = $("input[name='ck']");
    console.log(cks.length);
    var checked = [];
    // Add ids of checked messages to checked array
    for(i = 0;i<cks.length;i++){
        if(cks[i].checked){
            checked.push(cks[i].parentNode.parentNode.id);
        }
    }

        // AJAX delete POST
    var jsonob = JSON.stringify(checked);
    $.post("deletecom.php" , {rows_to_be_deleted:jsonob} , function(data){
        for(i=0;i<checked.length;i++){
            // hide deleted messages row if delete POST successful
            $("#" + checked[i]).fadeOut('slow' , function(){
                $(this).remove();
            });
        }
    });
}

function checkUncheckAll(){
  // var chks = all checkboxes
  var chks = document.getElementsByName("ck");

  // if select all checkbox is checked
  if(document.getElementById("ck_All").checked) {

    for( i = 0;i < chks.length;i++ ){
      document.getElementsByName("ck")[i].checked = true;
    }

  } else {

        for(i = 0;i < chks.length;i++){
      document.getElementsByName("ck")[i].checked = false;
        }
    }
};

function selectUnselect(checked){
    if(!checked){
    document.getElementById("ck_All").checked = false;
    } else {
        document.getElementById("delete_link").onclick = function(){
            deleteSelectedRows();
        };
        var chks = $("input[name='ck']");
        var all_checked = true;
        for(i=0;i<chks.length;i++){
            if(chks[i].checked){
                continue;
            } else {
                all_checked = false; 
              break;
            }
        }
        if(all_checked){
            document.getElementById("ck_All").checked = true;
        }
    }
}
// Here we use jQuery's document ready event listener to add the click event listener to #delete_link.  
$(document).ready(function(){
  $('#delete_link').on('click', function(){
    // (jQuery syntax) - check if number of checked inputs with name attribute of 'ck' is zero
    if($('input[name="ck"]:checked').length === 0){
      alert('Please select an item!');
    } else {
    // or confirm if the user really wants to delete
      var warning = confirm("Are you sure you want to delete?");
      if (warning == true) {
         deleteSelectedRows();
      } 
    }
  });
})

</script>
<a id="delete_link">Supprimer</a>
<br><br>
<div id="divtable"><table class="table">
    <tr id="throws"> 
        <tr><th><input id="ck_All" type="checkbox" onchange="checkUncheckAll()" />Select</th>
        <th>Nom</th>
         <th>Email</th>
         <th>Subject</th>
         <th>Messages</th>
          <th>Date Creation</th></tr>
          <tr id="1">
            <td><input name="ck" onchange="selectUnselect(this.checked)" type = "checkbox" /></td>
            <td>Name</td>
            <td>Email</td>' .  
            <td>Subject</td>
            <td>Lorem ipsum dolor</td>
            <td>2017-01-01</td>
    </tr>
    <tr id="2">
            <td><input name="ck" onchange="selectUnselect(this.checked)" type = "checkbox" /></td>
            <td>Name</td>
            <td>Email</td>' .  
            <td>Subject</td>
            <td>Lorem ipsum dolor</td>
            <td>2017-01-01</td>
    </tr>
  </table>
</div>