如果沒有單選按鈕經過

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>