JS to achieve a dinner automatic selection box (case analysis)

JS实现点餐自动选择框(案例分析) 1. Target requirements (a total of two):

1. Click to select / All optional box, implement the corresponding function 2. Click the selection box below, if all the selection box is selected simultaneously, the top all box automatically turns into a check status, otherwise it is non-check status


2. Ideas:

1. Implement the above selection box all-in-one, add the above mouse click event, let all the following selection boxes will be the same as above 2 When the selection box below is clicked, use the switch idea to check whether it is all selected.


3.JS implementation steps:

above all selected / all Select box, implement step

1. Acquire element

var chkall = document.GtelementByid (‘checkall’); var chklist = document.getlementsByname ‘Check’);
 2. Implementation of the selection box all-in-one / all-in-selection function   
Chkall.onClick = function () {for (var i = 0; i

3. The following selection box clicks
Switching idea: When only two states have, the Boolean type can be used to represent these two status isallok = true (all selected)
  1. Prospects ISALLOK = True <chkList.length;i++){
    chkList[i].checked=this.checked;
    }
 } 2. Verify hypothesis 
3. Realize demand according to verification results

//3.1 Traversing the following buttons, check the click event for the lower button (VAR i = 0; I


finally attached Complete code:

 Title  <chkList.length;i++){
  chkList[i].onclick=function ( ) {
   var isAllChecked=true;//假设全部都是选中状态
   for(var j=0;j<chkList.length;j++){
     if(chkList[j].checked==false){
      isAllChecked=false;
     }
    }
   //检测完毕之后,根据开关的值来设置上方选择框的状态
   if(isAllChecked==true){
    chkAll.checked=true;
   }
   else {
    chkAll.checked=false;
   }
  }
  } * {margin : 0; Padding: 0;} Table {Border: 1PX Solid # c0c0c0; margin: 100px auto; / * margin two values ​​represent the upper and lower, left and right * / text-align: center; width: 500px; border-collapse: collapse; / * Border merge, if adjacent, share a border * /} TH {font: bold 15px "Microsoft Ya black"; Background-Color: # 09c; color: #fff; height: 24px;} td {border: 1px Solid # d0d0d0; color: # 404060; padding: 15px;} 
Dialing system

All-selection / all
   Merchant          Red burnt meat Longjiang pig foot  ¥ 200  Crispy ribs  Beijing roast duck  Longjiang pig foot  ¥ 88  If you think this article is helpful to you, welcome to reprint, please indicate the source, thank you! 
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment

Longjiang pig foot meal
// 1. Get interface pair pair Element VAR Chkall = Document.GtelementByid ('Checkall'); var chklist = document.getlementsByname (' Check '); // 2. Implement the selection box of the selection box / all inexpensive function Chkall.onClick = function () {for (var i = 0; i
Summary The above is a small series to introduce the JS to implement a dinner selection box, I hope that everyone can help, if everyone has If you have any questions, please leave a message, the small package will reply to everyone in time. I am very grateful to everyone in Tumi Cloud website!