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

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 是如何构建的：将输入 id 的中心部分 hold_date_1 替换为 _。

查看下面的交互式演示。

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));
});

<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">

Answer 2

使用纯 javascript 你可以做到这一点

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);

<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 />