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个或更多，则需要逗号和单词，因此动物，动物和动物都是如此。如果选择2，那么它将是动物和动物＆＃39;。如果选择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

Answer 2

这就是你想要的。

我添加了sentence div - 用于放入句子。它考虑了已选择的项目数，并选择是否应该说is或are和然后，如果它是are，那么在最后一项上，它会说and：

var $sentence = $('#sentence');

$('input[type="button"]').click(function() {

  var total = $('input[type="checkbox"]:checked').length;
  if (total == 1) {
    $('#sentence').text("Your favourite animal is a " + $('input[type="checkbox"]:checked').val());
  } else {
    $('#sentence').text("Your favourite animals are ");
    $('input[type="checkbox"]:checked').each(function(i) {
      if (i == total - 1) {
        $sentence.append('and ' + $(this).val());
      } else {
        $sentence.append($(this).val() + ', ');
      }
    });
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input name="Dog" type="checkbox" value="dogs">Dogs
  <br>
  <input name="Cat" type="checkbox" value="cats">Cats
  <br>
  <input name="Bird" type="checkbox" value="birds">Birds
  <br>
  <input name="Rabbit" type="checkbox" value="rabbits">Rabbit
  <br>
  <input name="FavAnimals" type="button" value="Show my favorite animals">
</form>
<div id='sentence'></div>

Fiddle

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

2 个答案: