Javascript 在使用jQuery提交时检查添加到句子中的单词

我有这个清单

<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">
</form>

狗

猫

鸟类

兔子

我想发生的是，当有人选择他们最喜欢的动物并点击“显示我最喜欢的动物”按钮时，一句话将出现在同一页面上，显示您使用的选择

例1：

你最喜欢的动物是狗、猫和鸟

例2：

你最喜欢的动物是狗和猫

例3：

你最喜欢的动物是狗

所以必须有三种不同类型的句子。如果选择3或更多，则需要逗号和单词and，因此需要“动物、动物和动物”。如果选择2，则为“动物<强>和<强>动物”。如果选择1，则它将成为您最喜欢的动物，而不是您最喜欢的动物

---

我想使用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);

});

---

编辑：综合答案

$('[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);

});

---

这就是你想要的

我添加了一个

句子

div-用于将句子放入。它考虑已选择的项目数量，并选择是否应显示

是

还是

是

，如果是

是

，则最后一个项目将显示

和

：

var$句子=$（“#句子”）；
$（'input[type=“button”]”）。单击（函数（）{
var total=$（'input[type=“checkbox”]：checked'）。长度；
如果（总数=1）{
$（'#句'）.text（“您最喜欢的动物是一个“+$”（'input[type=“checkbox”]：checked'）.val（））；
}否则{
$（“#句”）.text（“你最喜欢的动物是”）；
$（'input[type=“checkbox”]：checked'）。每个（函数（i）{
如果（i==总计-1）{
$SENTURE.append（'和'+$（this.val（））；
}否则{
$SENTURE.append（$（this.val（）+'，'）；
}
});
}
});

狗


猫


鸟


兔子


这就是你想要的

我添加了一个
句子
div-用于将句子放入。它考虑已选择的项目数量，并选择是否应显示
是
还是
是
，如果是
是
，则最后一个项目将显示
和
：


var$句子=$（“#句子”）；
$（'input[type=“button”]”）。单击（函数（）{
var total=$（'input[type=“checkbox”]：checked'）。长度；
如果（总数=1）{
$（'#句'）.text（“您最喜欢的动物是一个“+$”（'input[type=“checkbox”]：checked'）.val（））；
}否则{
$（“#句”）.text（“你最喜欢的动物是”）；
$（'input[type=“checkbox”]：checked'）。每个（函数（i）{
如果（i==总计-1）{
$SENTURE.append（'和'+$（this.val（））；
}否则{
$SENTURE.append（$（this.val（）+'，'）；
}
});
}
});

狗


猫


鸟


兔子


因此，您基本上希望在用户选择动物时动态显示一个句子，对吗？您试图解决的问题是什么？您能否显示您的尝试，以便我们可以看到问题所在？我正在尝试这样做，当您点击“提交”时，您选择的动物将出现一个句子。每次你再次点击提交，它都会刷新列表。所以你基本上希望在用户选择动物时动态显示一个句子，对吗？你想解决的问题是什么？你能显示你的尝试，让我们看到问题在哪里吗？我正试图在你点击提交时这样做，您选择的动物将出现一个句子。每次您再次点击submit，它都会刷新列表。@msbodetti这就是为什么我说他们可以在此基础上进行构建。您可以自己提供一个更全面的答案。实际上，这个答案更简洁，因为它没有添加额外的逗号，而且还涵盖了什么都没有的情况selected@msbodetti这就是为什么我说他们可以在此基础上再接再厉。您可以自己提供一个更全面的答案，实际上它更简洁，因为它没有添加额外的逗号，还涵盖了未选择任何内容的情况。很好！有没有办法使它每次都刷新和更改，而不是每次按提交按钮时都添加一个新句子？@James done-请参阅我的编辑。如果我帮了你，请+1并接受：）$（“#句”）.text（“你最喜欢的动物是”）@ᔕᖺᘎᕊ, 当进行另一个选择时，只清除文本而不是追加（这是OP要求的…：）美好的有没有办法使它每次都刷新和更改，而不是每次按提交按钮时都添加一个新句子？@James done-请参阅我的编辑。如果我帮了你，请+1并接受：）$（“#句”）.text（“你最喜欢的动物是”）@ᔕᖺᘎᕊ, 当进行另一个选择时，只清除文本而不是追加（这是OP要求的…：）