Question

我正在尝试获取“已分组”inputs的内容，具体取决于是否已选中该“组”的复选框。然后我想获取组中每个输入的内容并将其放在array中。下面是由PHP循环生成的两个组示例，每个组input将在名称末尾具有组关联编号。如果需要，我可以更改名称，ID等。

// Group 1
<input name="hold_1" id="hold_1" value="1" type="checkbox">
<input name="hold_id_1" id="hold_id_1" value="200" type="hidden">
<input name="hold_date_1" id="hold_date_1" value="2014" type="text">

// Group 2
<input name="hold_2" id="hold_2" value="2" type="checkbox">
<input name="hold_id_2" id="hold_id_2" value="250" type="hidden">
<input name="hold_date_2" id="hold_date_2" value="2014" type="text">

这是我可以使用一些帮助的JQuery语句。此版本成功获取所有input值，但不区分检查哪个组。

        var inputs = $('input'), dataArray = {};
        $.each(inputs, function (index, input) {
            dataArray[$(input).attr('id')] = $(input).val();
        });

到目前为止，通过使用各种方法，我只能获得所有输入值（无论是否已选中），或仅获取复选框值，或其他一些对我无用的数据。

如果有帮助，这是使用该数据数组的.ajax帖子。这部分工作正常。

            $.ajax({
                url: "something.php",
                data: dataArray,
                type: 'POST',
                success: function (data) {
                    $(doStuff);
                }
            });

感谢任何帮助。

Answer 1

这是一个非常简单的方法，它允许您获取检查相应复选框的元素的值。

var inputs = $('input'), 
    checks = inputs.filter(':checkbox'),
    dataArray = {};

$.each(inputs, function (index, input) {
    var groupCheckbox = checks.filter('#' + input.id.replace(/_.*_/, '_'));
    if (groupCheckbox.is(':checked')) {
        dataArray[input.id] = $(input).val();    
    }
});

这里唯一的技巧是如何构建复选框的ID：将输入标识hold_date_1的中心部分替换为_。

查看下面的互动演示。

＆＃13;

function getData() {
    var inputs = $('input'), 
        checks = inputs.filter(':checkbox'),
        dataArray = {};
    
    $.each(inputs, function (index, input) {
        var groupCheckbox = checks.filter('#' + input.id.replace(/_.*_/, '_'));
        if (groupCheckbox.is(':checked')) {
            dataArray[input.id] = $(input).val();    
        }
    });
    
    return dataArray;
}

$(':checkbox').on('change', function() {
    var data = getData();
    alert(JSON.stringify(data, null, 4));
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="hold_1" id="hold_1" value="1" type="checkbox">
<input name="hold_id_1" id="hold_id_1" value="200" type="hidden">
<input name="hold_date_1" id="hold_date_1" value="2014" type="text">

<input name="hold_2" id="hold_2" value="2" type="checkbox">
<input name="hold_id_2" id="hold_id_2" value="250" type="hidden">
<input name="hold_date_2" id="hold_date_2" value="2014" type="text">

＆＃13;

Answer 2

使用纯JavaScript您可以执行此操作

＆＃13;

function checkAllBoxes () {
    var checkedBox = document.querySelectorAll("[type=checkbox]:checked");
    
    for(var i in checkedBox) {
       console.log(checkedBox[i])
    }
}

var checkAll = document.querySelector("#checkAll");

checkAll.addEventListener("click", checkAllBoxes, false);

＆＃13;

<input name=hold_1 id=hold_1 value=1 type=checkbox />
<input name=hold_id_1 id=hold_id_1 value=200 hidden />
<input name=hold_date_1 id=hold_date_1 value=2014 type=text />

<input name=hold_2 id=hold_2 value=2 type=checkbox />
<input name=hold_id_2 id=hold_id_2 value=250 hidden />
<input name=hold_date_2 id=hold_date_2 value=2014 type=text />

<input id=checkAll type=button value=checkMe />

＆＃13;

如果选中复选框，则获取其他输入的内容

2 个答案: