如果未选择单选按钮则发出警报

时间:2017-10-01 14:19:12

标签: javascript html radio-button alert

如果在'中没有选择单选按钮,请选择您的宠物类型'单击提交按钮后,会弹出一个警告框,说明"你没有选择一种类型的宠物"。当没有选择单选按钮并且没有选择颜色时,颜色也是如此。

提前谢谢

整个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>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:0)

您可以使用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()" />

这里我使用了提交事件和提交按钮,因为你有一个表单 - 然后你需要在出现错误或使用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>

答案 1 :(得分:0)

这比你正在做的事情简单得多。 .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>