如果未選擇任何單選按鈕，則發出警報
[英]Alert if no radio buttons are selected
問題描述
如果在單擊提交按鈕后“選擇寵物的類型”部分中未選擇任何單選按鈕，則應彈出一個警告框，提示“您沒有選擇寵物的類型”。 當未選擇警告“您未選擇顏色”單選按鈕時，顏色也是如此。
先感謝您
整個HTML：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Adopt a pet</title> <head> <script> function calculateCost() { var radioButton; var checkbox; var pet; var colour; var cost = 0; var selectedPet = ["Cat", "Dog", "Rabbit"]; var selectedColour = ["Black", "Gold", "White"]; for (var i = 1; i <= 3; i++) { radioButton = document.getElementById(selectedPet[i-1]); if (radioButton.checked == true) { pet = selectedPet[i-1]; cost+= parseInt(radioButton.value); //alert(parseInt(radioButton.value)); } //I just guessed this part. This may not be the correct code for this else if(selectedPet == null) OR (pet == null) alert("You did not selected a pet") } for (var i = 1; i <= 3; i++) { radioButton = document.getElementById(selectedColour[i-1]); if (radioButton.checked == true) { colour = selectedColour[i-1]; cost+= parseInt(radioButton.value); //alert(parseInt(radioButton.value)); } // This part I guessed again else if(selectedColour == null) OR (colour == null) alert("You did not selected a colour") } else alert("You did not select anything") } alert("You have selected a "+pet+" and the colour selected was "+colour+", the total cost is $"+cost); } </script> </head> <body> <h1> Adopt a pet </h1> <form> <p>Choose a type of pet: <br> <input type="radio" id="Cat" name="pet" value="200"><label for="cat">Cat</label> <br> <input type="radio" id="Dog" name="pet" value="200"><label for="dog">Dog</label> <br> <input type="radio" id="Rabbit" name="pet" value="20"><label for="rabbit">Rabbit</label> <br> </p> <p>Choose the colour of pet: <br> <input type="radio" id="Black" name="colour" value="80"><label for="black">Black</label> <br> <input type="radio" id="Gold" name="colour" value="100"><label for="gold">Gold</label> <br> <input type="radio" id="White" name="colour" value="90"><label for="white">White</label> <br> </p> <p><input type="button" value="Submit" onClick="calculateCost();"> </form> </body> </html>
2 個解決方案
解決方案1
1 2017-10-01 14:30:28
您可以使用document.querySelector直接獲取選定的單選
您確實需要確保值是數字-使用parseInt或僅使用+
您可以不填寫表格並使用按鈕，因為您沒有提交。
function calculateCost() { var cost = 0; var selPet = document.querySelector("[name=pet]:checked"); var selColour = document.querySelector("[name=colour]:checked"); var error = []; if (!selPet) { error.push("No Pets"); } if (!selColour) { error.push("No Colour"); } if (error.length>0) { alert(error.join('\\n')); // show one or two errors with a newline return; // no need to stay } // implicit else cost = (+selPet.value) + (+selColour.value); // or // cost = (+selPet.value) * (+selColour.value); alert("You have selected a " + selPet.value + " and the colour selected was " + selColour.value + ", the total cost is $" + cost); }
<h1> Adopt a pet </h1> <p>Choose a type of pet: <br> <input type="radio" id="Cat" name="pet" value="200"><label for="cat">Cat</label> <br> <input type="radio" id="Dog" name="pet" value="200"><label for="dog">Dog</label> <br> <input type="radio" id="Rabbit" name="pet" value="20"><label for="rabbit">Rabbit</label> <br> </p> <p>Choose the colour of pet: <br> <input type="radio" id="Black" name="colour" value="80"><label for="black">Black</label> <br> <input type="radio" id="Gold" name="colour" value="100"><label for="gold">Gold</label> <br> <input type="radio" id="White" name="colour" value="90"><label for="white">White</label> <br> </p> <p><input type="button" value="Calculate" onclick="calculateCost()" />
在這里，我使用了Submit事件和一個Submit按鈕，因為您有一個表單-如果出現錯誤或使用AJAX，您需要停止提交（返回false）
function calculateCost() { var cost = 0; var selPet = document.querySelector("[name=pet]:checked"); var selColour = document.querySelector("[name=colour]:checked"); if (!selPet) { alert("No Pets"); return false; } if (!selColour) { alert("No Colour"); return false; } cost = (+selPet.value) + (+selColour.value); // cost = (+selPet.value) * (+selColour.value); alert("You have selected a " + selPet.value + " and the colour selected was " + selColour.value + ", the total cost is $" + cost); return false // return true; // submits }
<h1> Adopt a pet </h1> <form onsubmit="return calculateCost()"> <p>Choose a type of pet: <br> <input type="radio" id="Cat" name="pet" value="200"><label for="cat">Cat</label> <br> <input type="radio" id="Dog" name="pet" value="200"><label for="dog">Dog</label> <br> <input type="radio" id="Rabbit" name="pet" value="20"><label for="rabbit">Rabbit</label> <br> </p> <p>Choose the colour of pet: <br> <input type="radio" id="Black" name="colour" value="80"><label for="black">Black</label> <br> <input type="radio" id="Gold" name="colour" value="100"><label for="gold">Gold</label> <br> <input type="radio" id="White" name="colour" value="90"><label for="white">White</label> <br> </p> <p><input type="submit" value="Submit" /> </form>
解決方案2
0 2017-10-01 14:41:34
這比您正在做的事情簡單得多。 .querySelector() DOM方法使獲取選中的單選按鈕變得非常簡單（請參見下面的代碼中的注釋）：
function calculateCost() { var cost = 0; var selectedPet = ["Cat", "Dog", "Rabbit"]; var selectedColour = ["Black", "Gold", "White"]; // Query each group for a checked radio button: var petRadio = document.querySelector("input[name=pet]:checked"); var colorRadio = document.querySelector("input[name=colour]:checked"); // If each variable holds a valid reference to an element, // then a pet and a color were chosen/ if(petRadio && colorRadio){ // A string holding a number can be converted quickly to a number by // prepending a plus sign in front of it. For multiplication, just use * // as the operator insteach of + (the one in the middle) cost = +petRadio.value + +colorRadio.value; alert("You have selected a " + petRadio.id + " and the colour selected was " + colorRadio.id + ", the total cost is $" + cost); } else { // Otherwise, one or both were not chosen alert("You must select a pet and a color!"); } }
<h1> Adopt a pet </h1> <form> <p>Choose a type of pet: <br> <input type="radio" id="Cat" name="pet" value="200"><label for="cat">Cat</label> <br> <input type="radio" id="Dog" name="pet" value="200"><label for="dog">Dog</label> <br> <input type="radio" id="Rabbit" name="pet" value="20"><label for="rabbit">Rabbit</label> <br> </p> <p>Choose the colour of pet: <br> <input type="radio" id="Black" name="colour" value="80"><label for="black">Black</label> <br> <input type="radio" id="Gold" name="colour" value="100"><label for="gold">Gold</label> <br> <input type="radio" id="White" name="colour" value="90"><label for="white">White</label> <br> </p> <p><input type="button" value="Submit" onClick="calculateCost();"> </form>
如果已選擇一個單選按鈕，如何禁用一組單選按鈕，如果未選擇一個單選按鈕並單擊下一個按鈕，如何顯示警報
[英]How to disable a group of radio buttons if one has been selected and display an alert if one is not selected and the next button is clicked
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.