如果没有单选按钮经过

Question

我有以下的单选按钮：

<div id="radiobuttons" class="container" name="buttons" align=center> 
 

 
    <h2>I Want my Building to be Made of:</h2> 
 

 
    <ul> 
 
    <li> 
 
    <input type="radio" id="brick-option" name="material" value="1" onClick="choose('bricks')"> 
 
    <label for="brick-option">Bricks</label> 
 

 
    <div class="check"></div> 
 
    </li> 
 

 
    <li> 
 
    <input type="radio" id="wood-option" name="material" value="3" onClick="choose('wood')"> 
 
    <label for="wood-option">Wood</label> 
 

 
    <div class="check"> 
 
     <div class="inside"></div> 
 
    </div> 
 
    </li> 
 

 
    <li> 
 
    <input type="radio" id="stone-option" name="material" value="2" onClick="choose('stone')"> 
 
    <label for="stone-option">Stone</label> 
 

 
    <div class="check"> 
 
     <div class="inside"></div> 
 
    </div> 
 
    </li> 
 
    </ul> 
 
</div> 
 

 
<form action="chooseheight.html"> 
 
    <div class="wrapper"> 
 
<button class="button" onClick="changechanceoflive();test()" align=center>Submit</button> 
 
    </div> 
 
</form>

当用户点击该按钮，它会带他们到下一个页面。虽然，我不希望他们在未检查其中一个按钮的情况下进入下一页。帮帮我？

Answer 1

function validate() { 
 
    if (document.querySelectorAll('input[type="radio"]:checked').length < 1) { 
 
    alert('Please select at least one.'); 
 
    return false; 
 
    } 
 
    
 
    alert('Success'); 
 
    // document.forms['myform'].submit; 
 
}

<div id="radiobuttons" class="container" name="buttons" align=center> 
 

 
    <h2>I Want my Building to be Made of:</h2> 
 

 
    <ul> 
 
    <li> 
 
     <input type="radio" id="brick-option" name="material" value="1"> 
 
     <label for="brick-option">Bricks</label> 
 
    </li> 
 

 
    <li> 
 
     <input type="radio" id="wood-option" name="material" value="3"> 
 
     <label for="wood-option">Wood</label> 
 
    </li> 
 

 
    <li> 
 
     <input type="radio" id="stone-option" name="material" value="2"> 
 
     <label for="stone-option">Stone</label> 
 
    </li> 
 
    </ul> 
 
</div> 
 

 
<form id="myform" action="chooseheight.html"> 
 
    <div class="wrapper"> 
 
    <input type="submit" name="submit" value="Submit" onclick="validate();" /> 
 
    </div> 
 
</form>