Question

我想将已选中的复选框值推入数组，但我遇到了一些问题，因为每次我尝试将其添加到数组中时它都会保持空白，我可能做错了但是可以＆＃39;弄清楚是什么。

HTML：

<input name="checkbox" value="1" type="checkbox" />
<input name="checkbox" value="2" type="checkbox" />
<input name="checkbox" value="3" type="checkbox" />
<input name="checkbox" value="4" type="checkbox" />
<button id="button" type="button">button</button>

Jquery：

$(document).ready(function () {

  var tmp = [];

  $("input").each(function() {
    if ($(this).is(':checked')) {
      var checked = ($(this).val());
      tmp.push(checked);
    }
  });

  $('#button').on('click', function () {
        alert(tmp);
  });

});

我做错了什么？

Answer 1

您没有调用复选框change事件。使用此：

$("input[name='checkbox']").change(function() {
  var checked = $(this).val();
  if ($(this).is(':checked')) {
    tmp.push(checked);
  } else {
    tmp.splice($.inArray(checked, tmp),1);
  }
});

http://jsfiddle.net/fx7su2rp/694/

Answer 2

您正在验证是否在开头检查它们（当没有选中时），这就是您获得该空数组的原因。

您应该处理input上的点击以更新阵列。看看这个。

$(document).ready(function () {

  var tmp = [];

  $("input").click(function() {
    if ($(this).is(':checked')) {
      var checked = ($(this).val());
      tmp.push(checked);
    } else {
      tmp.splice($.inArray(checked, tmp),1);
    }
  });

  $('#button').on('click', function () {
        alert(tmp);
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="checkbox" value="1" type="checkbox" />
<input name="checkbox" value="2" type="checkbox" />
<input name="checkbox" value="3" type="checkbox" />
<input name="checkbox" value="4" type="checkbox" />
<button id="button" type="button">button</button>

注意$('input').click()那里。

Answer 3

您需要处理每个复选框的已检查事件。

这样你就可以将它推入阵列了有关详细信息，请参阅here

$(document).ready(function () {

  var tmp = [];
  
  $("input").each(function() {
    $(this).change(function() {
    if(this.checked) {
      tmp.push(this.checked);
    }
});})
 
  $('#button').on('click', function () {
		alert(tmp);
    console.log(tmp);
  });
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="checkbox" value="1" type="checkbox" />
<input name="checkbox" value="2" type="checkbox" />
<input name="checkbox" value="3" type="checkbox" />
<input name="checkbox" value="4" type="checkbox" />
<button id="button" type="button">button</button>

Answer 4

在复选框上添加点击功能，每次点击，如果选中，则按tmp变量中的值。

  $('#button').on('click', function () {
  var tmp = [];
      $("input").each(function() {
          if ($(this).is(':checked')) {
          var checked = ($(this).val());
          tmp.push(checked);
        }
      });
  alert(tmp);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="checkbox" value="1" type="checkbox" />
<input name="checkbox" value="2" type="checkbox" />
<input name="checkbox" value="3" type="checkbox" />
<input name="checkbox" value="4" type="checkbox" />
<button id="button" type="button">button</button>

Answer 5

你可以像其他sais一样进行更改，但是当用户按下按钮时只运行代码更有效，所以在用户按下按钮时创建一个函数并调用该函数：

http://jsfiddle.net/fx7su2rp/693/

$(document).ready(function () {


  $('#button').on('click', function () {
        alert(check_boxes());
  });

});

function check_boxes() {
var tmp = [];
  $("input").each(function() {
    if ($(this).is(':checked')) {
      var checked = ($(this).val());
      tmp.push(checked);
    }
  });
  return tmp;
}

Answer 6

正如其他已经建议的答案一样，您必须在想要监控的任何复选框上发生change事件时更新您的值数组。

其他答案工作得很好，但我想我会发布更简单的javascript答案。我认为这比jQuery .each()循环更清晰，更具表现力，并且使我们无需手动查询中间数组中的值，推入和拼接。

除了jQuery集合之外，让我们创建一个包含名为checkboxesArray的复选框的常规数组，然后在我们的更改处理程序中使用filter然后map该数组：

$(document).ready(function () {

  let $checkboxes = $('[name="checkbox"]');
  let checkboxesArray = [].slice.call($checkboxes);
  let $output = $('#output');
  let values = [];
  
  $checkboxes.on('change', () => {
    values = checkboxesArray
      .filter((checkbox) => checkbox.checked)
      .map((checkbox) => checkbox.value);
      
    // Preview:
    $output.append('<div>' + values.join(', ') + '</div>');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="checkbox" value="1" type="checkbox" />
<input name="checkbox" value="2" type="checkbox" />
<input name="checkbox" value="3" type="checkbox" />
<input name="checkbox" value="4" type="checkbox" />
<button id="button" type="button">button</button>

<div id="output"></div>

Answer 7

这将为您提供帮助：

$("#button").click(function (e) { 
     var tmp = [];              
     $('.tmp').each(function(){
     if ($(this).is(':checked')) {
     var checked = ($(this).val());
     tmp.push(checked);
   }
 });
 console.log(tmp);
}

如何将选中的复选框值推入数组？

7 个答案: