如何修复表单中的“复选框”

Question

您好，我被困住了，我需要帮助。

如下面提供的编码所示，如​​果我删除所有“疫苗接种复选框”属性，它可以正常工作。但在这种情况下，我需要拥有“复选框疫苗接种”属性。

请尽量保留提供的大部分代码

这是家庭作业学校。 提前谢谢你！

    function calculateCost() {

      var radioButton;
      var checkbox;
      var pet;
      var colour;
      var vaccinate;
      var cost = 0;

      var selectedPet = ["Cat", "Dog", "Rabbit"];
      var selectedColour = ["Black", "Gold", "White"];
      var selectedVaccinate = ["Vaccinate"];
      
      var selectedPetCost;
      var selectedColourCost;
      var selectedVaccinateCost;

      for (var i = 1; i <= 3; i++) {
        radioButton = document.getElementById(selectedPet[i - 1]);
        if (radioButton.checked == true) {
          pet = selectedPet[i - 1];
          selectedPetCost = parseInt(radioButton.value);
          //alert(parseInt(radioButton.value));
        }
      }
      
      if (!pet) {
        alert('No pet selected!');
      }

      for (var i = 1; i <= 3; i++) {
        radioButton = document.getElementById(selectedColour[i - 1]);
        if (radioButton.checked == true) {
          colour = selectedColour[i - 1];
          selectedColourCost = parseInt(radioButton.value);
          //alert(parseInt(radioButton.value));
        }
      }
      
      if (!colour) {
        alert('No colour selected!');
      }
      
      for (var i = 1; i <= 1; i++) {
        checkbox = document.getElementById(selectedVaccinate[i - 1]);
        if (checkbox.checked == true) {
          pet = selectedVaccinate[i - 1];
          selectedVaccinateCost = parseInt(checkbox.value);
        }
      }
      
      if (pet && colour && vaccinate) {
        cost = selectedPetCost * selectedColourCost * selectedVaccinateCost;
        alert("You have selected a " + pet + " and the colour selected was " + colour + ", the total cost is $" + cost);
      }
      
      if (pet && colour) {
        cost = selectedPetCost * selectedColourCost;
        alert("You have selected a " + pet + " and the colour selected was " + colour + ", the total cost is $" + cost);
      }
      
    }

<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><label for="vaccinate">Vaccinate
<input type="checkbox" id="vaccinate" name="vaccinate" value="5"></label><br></p>

  <p><input type="button" value="Submit" onClick="calculateCost();">
</form>

Answer 1

你在你的函数中犯了几个错误，我已经修复了这些问题。请尝试以下代码

function calculateCost() {

  var radioButton;
  var checkbox;
  var pet;
  var colour;
  var vaccinate;
  var cost = 0;

  var selectedPet = ["Cat", "Dog", "Rabbit"];
  var selectedColour = ["Black", "Gold", "White"];
  var selectedVaccinate = ["vaccinate"];

  var selectedPetCost;
  var selectedColourCost;
  var selectedVaccinateCost;

  for (var i = 1; i <= 3; i++) {
    radioButton = document.getElementById(selectedPet[i - 1]);
    if (radioButton.checked == true) {
      pet = selectedPet[i - 1];
      selectedPetCost = parseInt(radioButton.value);
      //alert(parseInt(radioButton.value));
    }
  }
  if (!pet) {
    alert('No pet selected!');
    }

  for (var i = 1; i <= 3; i++) {
    radioButton = document.getElementById(selectedColour[i - 1]);
    if (radioButton.checked == true) {
      colour = selectedColour[i - 1];
      selectedColourCost = parseInt(radioButton.value);
      //alert(parseInt(radioButton.value));
    }
  }
  if (!colour) {
    alert('No colour selected!');
  }

     for (var i = 1; i <= 1; i++) {
    checkbox = document.getElementById(selectedVaccinate[i - 1]);
    if (checkbox.checked == true) {
      vaccinate = selectedVaccinate[i - 1];
      selectedVaccinateCost = parseInt(checkbox.value);
    }
  }
  if (pet && colour && vaccinate) {
    cost = selectedPetCost * selectedColourCost * selectedVaccinateCost;
    alert("You have selected a " + pet + " and the colour selected was " + colour + ", the total cost is $" + cost);
  }
  else if (pet && colour) {
    cost = selectedPetCost * selectedColourCost;
    alert("You have selected a " + pet + " and the colour selected was " + colour + ", the total cost is $" + cost);
  }
}

Working example

据我了解，当您只选择宠物和颜色时，您应该支付宠物和颜色的费用，而选择疫苗时，您应该获得宠物和颜色的费用和疫苗。我希望这个答案能解决您的问题。

Answer 2

这是您的 javascript 代码。

        function calculateCost() {

      var radioButton;
      var checkbox;
      var pet;
      var colour;
      var vaccinate;
      var cost = 0;

      var selectedPet = ["Cat", "Dog", "Rabbit"];
      var selectedColour = ["Black", "Gold", "White"];
      var selectedVaccinate = ["vaccinate"];
      
      var selectedPetCost;
      var selectedColourCost;
      var selectedVaccinateCost;

      for (var i = 1; i <= 3; i++) {
        radioButton = document.getElementById(selectedPet[i - 1]);
        if (radioButton.checked == true) {
          pet = selectedPet[i - 1];
          selectedPetCost = parseInt(radioButton.value);
          // alert(parseInt(radioButton.value));
        }
      }
      

      for (var i = 1; i <= 3; i++) {
        radioButton = document.getElementById(selectedColour[i - 1]);
        if (radioButton.checked == true) {
          colour = selectedColour[i - 1];
          selectedColourCost = parseInt(radioButton.value);
          //alert(parseInt(radioButton.value));
        }
      }
      

      
      for (var i = 1; i <= 1; i++) {
        checkbox = document.getElementById(selectedVaccinate[i - 1]);
        if (checkbox.checked == true) {
          vaccinate = selectedVaccinate[i - 1];
          selectedVaccinateCost = parseInt(checkbox.value);
          //alert(selectedVaccinateCost);
        }
      }
      
      if (pet && colour && vaccinate) {
        cost = selectedPetCost * selectedColourCost * selectedVaccinateCost;
        alert("You have selected a " + pet + " and the colour selected was " + colour + ", the total cost is $" + cost);
      }else if (pet && colour) {
        cost = selectedPetCost * selectedColourCost;
        alert("You have selected a " + pet + " and the colour selected was " + colour + ", the total cost is $" + cost);
      }
      
    }

  <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><label for="vaccinate">With vaccinations
<input type="checkbox" id="vaccinate" name="vaccinate" value="5"></label><br></p>

  <p><input type="button" value="Submit" onClick="calculateCost();">
</form>

您已在 vaccinate 部分将“vaccinate”变量命名为“pet”。所以，这就是为什么它没有计算实际成本的问题。所以，我将“pet”变量重命名为“vaccinate”，效果很好。

Answer 3

好的，我得到了一些 jquery，以了解我对您尝试实现的目标的理解

$('.calculate').click(function(){
animal=$('input[name=animal]:checked').val();
color=$('input[name=color]:checked').val();
if(animal == null || color ==null){
color='nothing'
animal='Nothing'
}
$('.inside').text('You choose '+animal+' Also color '+color);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>Choose animal you like</span><br>
<input type='radio' name='animal' value='dog'>dog<br>
<input type='radio' name='animal' value='cat'>cat<br>
<input type='radio' name='animal' value='donkey'>dnkey<br>
<span>Choose Color you like</span><br>
<input type='radio' name='color' value='Green'>Green<br>
<input type='radio' name='color' value='Blue'>greeb<br>
<input type='radio' name='color' value='red'>green<br>
<button class='calculate'>
Calculate
</button><br>
<div class='inside'>
Strange huh?
</div>