フォームで「チェックボックス」を修正する方法

Question

こんにちは私は立ち往生しており、助けが必要です。

下記のコードに示すように、[Vaccinate checkbox]のプロパティをすべて削除すると正常に動作します。しかし、私はこの場合にチェックボックスのワクチン接種をする必要があります。

それは宿題のための学校ですできるだけ多く提供されているコードの大部分を維持してみてください。 ありがとうございます！

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

を達成しようとするものの理解何のためにいくつかのjQueryを行いました[OK]私はこれらの問題を修正しました。あなたはコストを取得する必要があるときに選択ワクチン接種とのに対し、あなただけのペットと色を選択すると、あなたがペットと色のかかるはず、私の知る限り理解されるように、コード

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

私はあなたがあなたの中のミスのカップルを行っている

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

ここにあなたの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>

あなたはvacinateセクションの "ペット" として変数を "予防接種" という名前の作りました。だから、実際のコストを計算しなかったのは、これが問題でした。だから、私は "ペット"変数を "予防接種"と改名しても問題ありません。