Question

我有一个带有标签的表单，其中包含按钮。在用户单击下一步之前，我想检查是否已单击至少一个或所有按钮，如果单击，则显示下一个选项卡。如果没有，会弹出一个警告！

<button class="btns rem" id="mon">morning</button>
<button class="btns rem" id="oo" >afternoon</button>
<button class="btns rem" id="pp" >night</button>
<button class="btns" id="day" >Next</button>

 <script type="text/javascript" >
    document.getElementById("day").onclick = 
     function(event) {
    var btn= 
      document.getElementsByClassName("btns") ;
        for(x=0; x<btn.length; x++){
    if(btn[x].click == true){
        prompt("open Next page?");
              } 
        else {
       alert("please click at least one button");
    } 
   } 

 </script>

Answer 1

如果您愿意，可以尝试一下。

3pt

Answer 2

更好的方法是使用checkboxes，因为您want to check if at least one or all the buttons have been clicked。然后附上onchange事件。

var btns = document.getElementsByClassName("radio-btn") ;
var len = btns.length;
var isSelected = false;
while(len--) {
  btns[len].onchange = function() {
    isSelected = this.checked ? true : false;
  };
} 
document.getElementById("day").onclick = function() {
  if(isSelected) {
    alert("open Next page?");
  }
  else {
    alert("please click at least one button");
  }
}

<form onsubmit="return false;">
  <input type="checkbox" name="time" class="radio-btn rem"> Morning<br>
  <input type="checkbox" name="time" class="radio-btn rem"> Afternoon<br>
  <input type="checkbox" name="time" class="radio-btn rem"> Evening<br>
  <button class="btns" id="day" >Next</button>
</form>

检查是否单击了按钮然后执行某些操作

2 个答案: