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

Question

我有这个列表

<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 种不同类型的句子。如果选择了 3 个或更多，则需要逗号和单词 and，所以 'animal, animal, and animal'。如果选择 2，它将是“动物和动物”。如果选择了 1，那么你最喜欢的动物是将是你最喜欢的动物是。

我想使用 jQuery，但在思考如何去做时遇到了麻烦。我是新手，所以任何帮助都会很棒。

Answer 1

编辑:综合答案

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

});

DEMO