Question

我更喜欢从特定复选框组中选中复选框，具体取决于我点击了哪个按钮，我使用了$('input[name="' + groupName + '"]:checked')。这将确保仅选中来自咖啡或动物复选框组的选中复选框。但它并没有像我预期的那样发挥作用。

<body>
    <div>
        <input type="checkbox" value="Lion" name="animals" checked />Lion<br>
        <input type="checkbox" value="Tiger" name="animals" />Tiger<br>
        <input type="checkbox" value="Elephant" name="animals" />Elephant<br>
        <input type="checkbox" value="Girafee" name="animals" />Girafee<br>
        <input type="submit" id="__mainAnimals" />
        <br><br><br><br><br><br>
        <input type="checkbox" value="Coffe" name="drinks" checked />Coffe<br>
        <input type="checkbox" value="Tea" name="drinks" />Tea<br>
        <input type="checkbox" value="Milk" name="drinks" />Milk<br>
        <input type="checkbox" value="Mocha" name="drinks" />Mocha<br>
        <input type="submit" id="__mainDrinks" />
    </div>
    <div id="__DIVresult"></div>


    <script type="text/javascript">
        $(document).ready(function () {
        $('#__mainAnimals').click(function () {
            getSelectedCheckBoxes('animals');
        });

        $('#__mainDrinks').click(function () {
            getSelectedCheckBoxes('drinks');
        });

        var getSelectedCheckBoxes = function (groupName) {
            var result = $('input[name="' + groupName + '"]:checked');
            if (result.length > 0) {
                var resultString = result.length + " checkboxe(s) checked<br/>";
                result.each(function () {
                    resultString += $(this).val() + "<br/>";
                });
                $('__DIVresult').html(resultString);
            }
            else {
                $('__DIVresult').html("No checkbox checked");
            }
        };
    });

    </script>

</body>

Answer 1

第一个ID选择器为#，因此$('__DIVresult')应为$('#__DIVresult')

第二个ID应以兼容字母开头

使用ASCII字母和数字以外的字符，＆＃39; _＆＃39;，＆＃39; - ＆＃39;和＆＃39;。＆＃39;可能会导致兼容性问题，因为HTML 4中不允许这样做。虽然HTML 5中已取消此限制，但 ID应以兼容字母开头。

参考：https://developer.mozilla.org/en/docs/Web/HTML/Global_attributes/id

第3次小更新，添加了两个结果div，一个用于动物饮料：

<hr>
animals Result:
<div id="DIVresultanimals"></div>
<hr>
drinks Result:
<div id="DIVresultdrinks"></div>

然后使用$('#DIVresult'+groupName).html(resultString);

动态定位它们

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="checkbox" value="Lion" name="animals" checked />Lion
  <br>
  <input type="checkbox" value="Tiger" name="animals" />Tiger
  <br>
  <input type="checkbox" value="Elephant" name="animals" />Elephant
  <br>
  <input type="checkbox" value="Girafee" name="animals" />Girafee
  <br>
  <input type="submit" id="mainAnimals" />
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <input type="checkbox" value="Coffe" name="drinks" checked />Coffe
  <br>
  <input type="checkbox" value="Tea" name="drinks" />Tea
  <br>
  <input type="checkbox" value="Milk" name="drinks" />Milk
  <br>
  <input type="checkbox" value="Mocha" name="drinks" />Mocha
  <br>
  <input type="submit" id="mainDrinks" />
</div>
<hr>
animals Result:
<div id="DIVresultanimals"></div>
<hr>
drinks Result:
<div id="DIVresultdrinks"></div>

<script type="text/javascript">
  $(document).ready(function() {
    $('#mainAnimals').click(function() {
      getSelectedCheckBoxes('animals');
    });

    $('#mainDrinks').click(function() {
      getSelectedCheckBoxes('drinks');
    });

    var getSelectedCheckBoxes = function(groupName) {
      var result = $('input[name="' + groupName + '"]:checked');
      if (result.length > 0) {
        var resultString = result.length + " checkboxe(s) checked<br/>";
        result.each(function() {
          resultString += $(this).val() + "<br/>";
        });
        $('#DIVresult'+groupName).html(resultString);
      } else {
        $('#DIVresult'+groupName).html("No checkbox checked");
      }
    };
  });
</script>

＆＃13;

Answer 2

在您的饮品和动物部分，您不会将两者分开，所以当您使用点击功能时，它不会区分两个部分。将每个类添加到类后，该按钮将仅调用实际检查的已检查项。

<html>

   <form>
    <input name="selector[]" id="ani" class="ads_Checkbox" type="checkbox" value="Lion"  />Lion</br>
        <input name="selector[]" id="ani" class="ads_Checkbox" type="checkbox" value="Tiger" />Tiger</br>
        <input name="selector[]" id="ani" class="ads_Checkbox" type="checkbox" value="Elephant" />Elephant</br>
        <input name="selector[]" id="ani" class="ads_Checkbox" type="checkbox" value="Girafee" />Girafee</br>

    <input type="button" id="save_value" name="save_value" value="Save" /></br>
      <textarea id="t"></textarea>
        </form>

Answer 3

<script>


     function updateTextArea() {         
 var allVals = [];
 $('.ads_Checkbox:checked').each(function() {
   allVals.push($(this).val());
 });
 $('#t').val(allVals);

}

    $('#save_value').click(function(){
        $('.ads_Checkbox:checked').each(function(){
                updateTextArea();
        });
    });

在这段代码中，我已经将每只动物命名并将它们放在一个类中，以便我可以从一个数组中回忆它们。我希望这会有所帮助。

不同组的复选框在jquery中不起作用

3 个答案: