Comment réparer 'checkbox' dans le formulaire

Question

Salut, je suis bloqué et j'ai besoin d'aide.

Comme indiqué dans le codage fourni ci-dessous, il fonctionne correctement si je supprime toutes les propriétés de la case à cocher "Vacciner". Mais j'ai besoin de la propriété 'checkbox vaccinate' dans ce cas.

S'il vous plaît essayer de garder la plupart du code fourni autant que possible

Il est l'école pour les devoirs. Merci d'avance!

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

Vous avez fait quelques erreurs dans votre fonction et j'ai résolu ces problèmes. S'il vous plaît essayer ci-dessous le code

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

Pour autant que je compris, Lorsque vous sélectionnez uniquement l'animal et la couleur que vous devriez le coût pour l'animal et la couleur, alors que lorsque l'on sélectionne avec la vaccination, vous devriez obtenir le coût pour animal de compagnie et couleur avec vaccination. J'espère que cette réponse résoudra votre problème.

Answer 2

ok j'ai obtenu faire quelques jquery pour ce que je comprends de ce que vous essayez d'atteindre

$('.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>

Answer 3

Voici votre code 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>

Vous avez fait nommé le "vacciner" variable "animal de compagnie" dans la section vacinate. Donc, c'était le problème pourquoi il n'a pas calculé le coût réel. Donc, j'ai renommé la variable "animal de compagnie" comme "vacciner" et cela fonctionne bien.