Обновление Span на основе Radio Button Выбор

Question

Я сделал это jsfiddle: http://jsfiddle.net/6tZmc/1/

В принципе, я хотел бы обновить пустой промежуток, основанный на выборе кнопки радио. Вот код:

HTML

<div> 
<p>Your chose: <span id="animal"></span></p> 
</div> 
<div> 
<h2>Pick an Animal:</h2> 
<input type="radio" name="pets" value="cat" />Cats<br /> 
<input type="radio" name="pets" value="dog" />Dogs 
</div> 

JQuery:

function petChoice(){ 
    var chosenPet = $('input[name="pets"]:checked').val(); 
    if(chosenPet = 'cat'){ 
     $("span#animal").text(); 
     $("span#animal").text("Cats"); 
    }else if (chosenPet = 'dog'){ 
     $("span#animal").text(); 
     $("span#animal").text("Dogs"); 
    }else{ 
     $("span#animal").text(); 
    } 
} 
$("input[name='pets']").click(function(){ 
    petChoice(); 
}); 

Заранее спасибо

Answer 1

В заявлении if вы пытаетесь назначить cats и dogs на chosenPet, когда на самом деле вы хотите проверить равенство. Изменение = к ==

Answer 2

Не забудьте завернуть вы действуете так, что она выполняется после того, как document готов.

Также вы можете сократить свою функцию, просто установив текст на значение переключателя, который был нажат. В событиях jQuery this относится к элементу, который вызвал событие.

$(function() { 
    $("input[name='pets']").click(function() { 
     $("#animal").text($(this).val()); 
    }); 
}); 

fiddle.

Answer 3

function petChoice(){ 
    var chosenPet = $('input[name="pets"]:checked').val(); 
    if(chosenPet == 'cat'){ 
     $("span#animal").html("Cats"); 
    }else if (chosenPet == 'dog'){ 
     $("span#animal").html("Dogs"); 
    }else{ 
     $("span#animal").empty(); 
    } 
} 
$("input[name='pets']").click(function(){ 
    petChoice(); 
}); 

jsfiddle: http://jsfiddle.net/6tZmc/4/