jeudi 9 avril 2015

How to make checkbox show a link after being selected and submitted?

So far I have this code that Asks the user what his/her favorite animal is. After they select the choices, text appears that shows the choices they've made in a sentence. Now what I am wondering is, how do you make the selected choices be shown as hyperlinks to images in the output?


So after the user selects their choices, the output will be:


Your favorite animals are dogs and birds.


This is the code I have so far.



<form>
<input name="Dog" type="checkbox" value="Dog">Dogs
<br>
<input name="Cat" type="checkbox" value="Cat">Cats
<br>
<input name="Bird" type="checkbox" value="Bird">Birds
<br>
<input name="Rabbit" type="checkbox" value="Rabbit">Rabbit
<br>
<input name="FavAnimals" type="button" value="Show my favorite animals">


And here's the jQuery



$('[name=FavAnimals]').click(function () {
var $inputs = $(':checkbox:checked'),
message = 'Please select animals';
if ($inputs.length) {
var animals = $.map($inputs, function (input) {
return $(input).val();
});

message = 'your favorite animal';
if (animals.length > 1) {
message += 's are '
message += animals.slice(0, animals.length - 1).join(', ');
message += ' and ' + animals.pop();
} else {
message += ' is ' + animals.shift();
}


}
$('#message').text(message) });

Aucun commentaire:

Enregistrer un commentaire