Case: js realizes the automatic selection box of ordering

Design sketch:

1. Target requirements (two in total):

1. Click the select all / select none box above to realize the corresponding functions
2. Click the selection box below. If all the selection boxes are selected at the same time, the check box above will automatically become checked. Otherwise, it is not checked

2. Thought analysis:

1. Realize the function of selecting all the above selection boxes and not selecting all. Add the mouse click event on the top and make all the selection boxes on the bottom the same as those on the top
2. When clicking in the selection box below, use the switch idea to check whether all are selected

3.js implementation steps:

Select all / uncheck all selection box above, implementation steps
1. Get element

var chkAll=document.getElementById('checkAll');
    var chkList=document.getElementsByName('check');

2. Realize the function of selecting all or none in the upper selection box

    chkAll.onclick=function (  ) {
          for(var i=0;i<chkList.length;i++){
              chkList[i].checked=this.checked;
              }
    }

3. Click on the selection box below
Switch idea: when the result of an operation has only two states, boolean type can be used to represent the two states isAllOk = true (select all)
1. Propose the hypothesis isallok = true
2. Test hypothesis
3. Implement the requirements according to the verification results

    //3.1 traverse the button below and check the click event of the button below
  for(var i=0;i<chkList.length;i++){
      chkList[i].onclick=function (  ) {
          var isAllChecked=true;//Assume all are selected
            for(var j=0;j<chkList.length;j++){
                    if(chkList[j].checked==false){
                        isAllChecked=false;
                    }
                }
          //After testing, set the state of the upper selection box according to the value of the switch
          if(isAllChecked==true){
              chkAll.checked=true;
          }
          else {
              chkAll.checked=false;
          }
      }
      }

Finally, the complete code is attached:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        table {
            border: 1px solid #c0c0c0;
            margin: 100px auto;
            /*margin Two values represent up and down, left and right*/
            text-align: center;
            width: 500px;

            border-collapse: collapse;
            /*Border merge, if adjacent, sharing one border*/
        }
        th{
            font:bold 15px "Microsoft YaHei";
            background-color: #09c;
            color: #fff;
            height: 24px;
        }
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 15px;
        }
    </style>
</head>
<body>
<table>
    <!--caption Is the title of the table-->
    <caption>Ordering system</caption>
    <thead>
    <tr>
        <th>
            <input type="checkbox" id="checkAll">Select all/No choice
        </th>
        <th>Dish name</th>
        <th>business</th>
        <th>Price</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>
            <input type="checkbox" name="check"/>
        </td>
        <td>pork braised in brown sauce</td>
        <td>Longjiang pig's feet rice</td>
        <td>￥200</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" name="check"/>
        </td>
        <td>Crispy ribs</td>
        <td>Longjiang pig's feet rice</td>
        <td>￥998</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="check"/></td>
        <td>Beijing Roast Duck</td>
        <td>Longjiang pig's feet rice</td>
        <td>￥88</td>
    </tr>

    </tbody>
    <tfoot>
    <tr>
    </tr>
    </tfoot>
</table>
<script>
    //1. Get the corresponding elements of the interface
    var chkAll=document.getElementById('checkAll');
    var chkList=document.getElementsByName('check');
    //2. Realize the function of selecting all or none in the upper selection box
    chkAll.onclick=function (  ) {
          for(var i=0;i<chkList.length;i++){
              chkList[i].checked=this.checked;
              }
    }
    //3. Realize the following selection function
    //3.1 traverse the button below and check the click event of the button below
  for(var i=0;i<chkList.length;i++){
      chkList[i].onclick=function (  ) {
          var isAllChecked=true;//Assume all are selected
            for(var j=0;j<chkList.length;j++){
                    if(chkList[j].checked==false){
                        isAllChecked=false;
                    }
                }
          //After the detection, set the state of the upper selection box according to the value of the switch. The following can also be abbreviated as checkAll.checked = isAllChecked;
          if(isAllChecked==true){
              chkAll.checked=true;
          }
          else {
              chkAll.checked=false;
          }
      }
      }
</script>
</body>
</html>

Posted by OilSheikh on Thu, 19 Dec 2019 12:34:13 -0800

Programmer Group

Case: js realizes the automatic selection box of ordering

1. Target requirements (two in total):

2. Thought analysis:

3.js implementation steps:

Hot Keywords