javascript - 如果在 jQuery 中选中，则返回多个 CheckBox 值

Question

我的页面中有多个复选框。如果选中，我想检索它的值。

这是HTML代码..

<input name="ctl1189" type="checkbox" id="chkTicket_189310" class=" chkTicket" value="189310">

<input name="ctl1190" type="checkbox" id="chkTicket_189311" class=" chkTicket" value="189311">

等等..

Javascript代码：

function updateTicketAction() {
    var allUpdatedVendorTickets = $('.chkTicket').filter(function() { return this.value != $input.is(':unchecked'); });
    var sFinalUpdateList = '';

    allUpdatedVendorTickets.each(function() {
        var ids = $(this).attr('id').split('_')[1];

        sFinalUpdateList += ((sFinalUpdateList == '') ? '' : '|') + ids + ',' + $(this).val();
    });
    alert(sFinalUpdateList);
}

Answer 1

function updateTicketAction() {
    var sFinalUpdateList = '';
    $("input.chkTicket:checked").each( 
        function() { 
           var ids = $(this).attr('id').split('_');
           var id = ids[1];
           sFinalUpdateList += ((sFinalUpdateList == '') ? '' : '|') + id + ',' + $(this).val();
        } 
    );
    alert(sFinalUpdateList);
}

http://jquery-howto.blogspot.com/2008/12/how-to-check-if-checkbox-is-checked.html

Answer 2

试试这个代码

var collect='';
$('input:checked').each(function(i,e){  
    collect+=(collect===''? $(e).attr('name')+'='+$(e).val():','+$(e).attr('name')+'='+$(e).val());
    alert(collect);
})

Answer 3

我刚刚创建了一个fiddle。在 JavaScript 控制台中查找生成的对象，然后您可以对其进行进一步处理。

代码：

var checkedCheckboxes = $('.chkTicket:checked'),
    results = {};

checkedCheckboxes.each(function () {
    var key = $(this).attr('id').split('_')[1];
    results[key] = $(this).val();
});

function alertResults(results) {
    var text = '', sep = '';
    $.each(results, function (key, value) {
        text += sep + key + '=' + value;
        sep = '|';
    });
    alert(text);
}

alertResults(results);
console.log(results);

Answer 4

这是一个返回所有检查输入的jsfiddle 片段。但是有一个问题，当您将 id 存储在 value-attribute 中时，为什么要拆分 id-attribute？无论如何，希望这对你有用！

function updateTicketAction() {
  var allUpdatedVendorTickets = $('.chkTicket:checked');
  var sFinalUpdateList = '';

  allUpdatedVendorTickets.each(function () {
    sFinalUpdateList += ((sFinalUpdateList == '') ? '' : '|') + $(this).val();
  }); 

  alert(sFinalUpdateList);
}

Answer 5

或者你可以使用 map()：

var el = $('input[type=checkbox]:checked').map(function(i,e){

        var id = $(e).attr('id').replace('chkTicket_', '');
        var val = $(e).val();

        return {
                'id' : id,
                'value' : val
               }

    });

console.log(el[0].id);

Answer 6

你的过滤功能是错误的。

this.value != $input.is(':unchecked');

您正在将属性（字符串）与jQuery 方法.value的返回值（布尔值）进行比较。.is它类似于：

'value' != !true  //checked
'value' != !false //unchecked

两者都将始终返回true- 除非valueis0或计算结果为假值的空字符串，并且表达式的右侧计算结果为false，!=不同的运算符将返回false。

所以，你filter的回调根本不过滤任何东西，除了取出checked有值或没有值的盒子0（这是无意的）。

您可以通过使用选择器来避免使用filter函数:checked：

var allUpdatedVendorTickets = $('.chkTicket:checked');

现在您将拥有一个仅包含 checked 的 jQuery 对象.chkTicket，这要好得多。

---

接下来，您正在错误地使用字符串。

"189310,189310|189311,189311"

这就是你的函数正在生成的。每次需要操作这些结果时，都必须在 处拆分字符串|，创建一个新数组。最好将其存储为数组。

var sFinalUpdateList = [];

假设您的键和值始终与示例中的相同，您也应该只存储一次。

allUpdatedVendorTickets.each(function() {
    sFinalUpdateList.push(this.value);
});

这将生成一个更干净且可维护的数组，其中仅包含选中框的值：

sFinalUpdateList =>
       [0] -> "189310"
       [1] -> "189311"

chkTicket_您可以通过附加到这些值来获取它们的 ID 。

jsFiddle