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

Question

我正在尝试获取 'grouped' inputs 的内容，具体取决于 'group' 的复选框是否被选中。然后我想获取组中每个输入的内容并将其放入 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 post。这部分工作正常。

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

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

If checkbox is checked, get the contents of other inputs

arrays

checkbox

jquery