Question

我有四个复选框（加法，减法，乘法和除法），如下所示：

<input class="operation" type="checkbox" id="chkAdd" value="addition"><label>Addition</label>

我正在尝试创建一个函数，该函数将创建一个数组，其中包含按下按钮时检查的所有复选框的值。最终结果是将数组传递给另一个使用所选数学运算符创建数学问题的函数。我看了几篇类似的帖子，但仍然无法弄清楚为什么这不起作用。以下是我到目前为止的情况：

function buttonPushed() {
  var checkedBoxes = [];
  $(document).ready(function() {
    $(".theButton").click(function(event) {
      event.preventDefault();
      checkedBoxes = $(".operation input:checkbox:checked").map(function() {
        checkedBoxes.push($(this).attr('val'));
      });
    });
  });
  alert(checkedBoxes);
}

alert只是为了查看功能是否正常工作。目前，当选中所有四个复选框并单击按钮时，会出现alert窗口，但它是空的。我尝试在<script>代码中调用该函数，然后使用按钮onclick="function()"。我现在只是在转动轮子。我非常感谢任何帮助。

Answer 1

如果我正确理解，那么这就是解决方案：

<form method="POST" action="" >

    <label for="chkAdd">Addition</label>
    <input class="operation" name="math_operation[]" type="checkbox" id="chkAdd" value="addition"><br />


    <label for="chkSub">Substration</label>
    <input class="operation" name="math_operation[]"  type="checkbox" id="chkSub" value="subtration"><br />


    <label for="chkMul">Multiplication</label>
    <input class="operation" name="math_operation[]"  type="checkbox" id="chkMul" value="multiplication"><br />


    <label for="chkDiv">Division</label>
    <input class="operation" name="math_operation[]"  type="checkbox" id="chkDiv" value="division"><br />
    <input type="button" id="btn" value="Push">

和jQuery Code就是这样的

<script type="text/javascript">
     $('#btn').on('click',function(){
        var checkedOperations = []
        $(':checked').each( function(){
            checkedOperations.push($(this).val());
         });
    console.log(checkedOperations);
   });
</script>

我的输出图片：

Answer 2

您需要将传递的函数中的映射值从返回到.map，然后在单击处理程序中使用结果。（你不能在页面加载时同步执行 - 必须在用户有机会点击它们之后显示找到的值）

您还应该将整个代码块放在$(document).ready中，而不是将$(document).ready(放在另一个函数中（最好使用更现代的版本，$(fn)）

$(function() { $(".theButton").click(function(event) { event.preventDefault(); const checkedBoxes = $(".operation input:checkbox:checked").map(function() { return $(this).attr('val'); }); alert(checkedBoxes); }); });

不需要任何jQuery，但

Answer 3

复选框调用'val'没有属性（即$(this).attr('val')无法正常工作）。它的“价值”是一个开始，有一个更简单的方法来获得它$(this).val()甚至this.value。你绑定事件和警告数组的方式也会有时间问题，我的意思是你何时调用函数buttonPushed，因为当你调用该函数时，click事件只会被绑定到按钮，所以如果你通过点击按钮将其称为马匹之前的有点推车，实质上你所做的就是警告一个空阵列。

首先在单击按钮之前将事件处理程序绑定到按钮。其次，您的jQuery选择器不正确".operation input:checkbox:checked正在尝试选择任何子元素，这些子元素是检查.operation元素的复选框的输入。空间不应该在那里，但是当然你不能把类和标签放在一起，所以首先把标签放在input.operation:checkbox:checked。可以说选择者有点过于热心，我的意思是.operation:checked就足够了。

希望有助于理解。对于围绕事件绑定的其他问题，何时调用文档就绪和地图功能，这里的其他答案显示足够我想让你走上正确的轨道。皮肤猫有多种方法。祝你好运

Answer 4

函数内部不需要document.ready。无需调用函数来附加click事件。此$(".operation input:checkbox:checked")选择器可以简化

＆＃13;

function buttonPushed() {
  var m = $.map($("input.operation:checked"), function(i, v) {
    return $(i).val()
  })
  console.log(m);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="operation" type="checkbox" id="chkAdd" value="addition"><label>Addition</label>
<input class="operation" type="checkbox" id="chkSub" value="subtraction"><label>Subtraction</label>
<input class="operation" type="checkbox" id="chkMul" value="multiply"><label>Multiply</label>
<input class="operation" type="checkbox" id="chkDiv" value="division"><label>Division</label>
<button onclick="buttonPushed()">Click</button>

＆＃13;

Answer 5

您的示例示例可能会帮助您解决问题

var matches = [];
$("#sub").click(function(){

  $(".theClass:checked").each(function() {
    matches.push(this.value);
  });

  alert(matches)  // here we are getting the all checked value

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name='cbox' value="red" class="theClass"/>red
<input type="checkbox" name='cbox' value="green" class="theClass"/>green
<input type="checkbox" name='cbox' value="yer" class="theClass"/>yer
<input type="checkbox" name='cbox' value="asdasd" class="theClass"/>asdasd
<input type="checkbox" name='cbox' value="radgdfged" class="theClass"/>radgdfged

<input type="submit" name="submit" id='sub'>

Answer 6

jQuery map()不返回本机数组。您必须将get()与map()一起使用。请尝试以下方式：

function buttonPushed() { 
  var checkedBoxes = $("input.operation:checked").map(function(){
    return $(this).val();
  }).get(); // you have use get() here
  alert(checkedBoxes);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="operation" type="checkbox" id="chkAdd" value="addition"><label>Addition</label>
<input class="operation" type="checkbox" id="chkAdd" value="subtraction"><label>Subtraction</label>
<input class="operation" type="checkbox" id="chkAdd" value="multiplication"><label>Multiplication</label>
<input class="operation" type="checkbox" id="chkAdd" value="division"><label>Division</label>
<br/><br/>
<input type="button" class="theButton" onclick="buttonPushed()" value="Get Value"/>

如何在jQuery中创建一个包含所有已选中复选框值的数组

6 个答案: