Question

我想知道如何捕获动态创建的文本框和彼此链接的复选框的值。

我的HTML元素将是这样的：

<div class="data_class">
    <input class="textbox_class" name="textbox[]" type="text" />

    <input class="checkbox_class" name="checkbox[]" type="checkbox" />1
    <input class="checkbox_class" name="checkbox[]" type="checkbox" />2
    <input class="checkbox_class" name="checkbox[]" type="checkbox" />3
    <input class="checkbox_class" name="checkbox[]" type="checkbox" />4
    <input class="checkbox_class" name="checkbox[]" type="checkbox" />5
</div>

复选框链接到输入类型=＆＃34; text＆＃34;（即文本框）

通过JQuery，我可以克隆＆＃34; data_class＆＃34;中的HTML元素。并加入其中。

但是在发布时，我们如何获得与每个文本框相关的复选框值。即如果我创建5个这样的元素，如：

<div class="data_class">
    <input class="textbox_class" name="textbox[]" type="text" value="A"/>

    <input class="checkbox_class" name="checkbox[]" type="checkbox" />1
    <input class="checkbox_class" name="checkbox[]" type="checkbox" />2
    <input class="checkbox_class" name="checkbox[]" type="checkbox" />3
    <input class="checkbox_class" name="checkbox[]" type="checkbox" />4
    <input class="checkbox_class" name="checkbox[]" type="checkbox" />5


    <input class="textbox_class" name="textbox[]" type="text" value="B"/>

    <input class="checkbox_class" name="checkbox[]" type="checkbox" />1
    <input class="checkbox_class" name="checkbox[]" type="checkbox" />2
    <input class="checkbox_class" name="checkbox[]" type="checkbox" />3
    <input class="checkbox_class" name="checkbox[]" type="checkbox" />4
    <input class="checkbox_class" name="checkbox[]" type="checkbox" />5

    <input class="textbox_class" name="textbox[]" type="text" value="C"/>

    <input class="checkbox_class" name="checkbox[]" type="checkbox" />1
    <input class="checkbox_class" name="checkbox[]" type="checkbox" />2
    <input class="checkbox_class" name="checkbox[]" type="checkbox" />3
    <input class="checkbox_class" name="checkbox[]" type="checkbox" />4
    <input class="checkbox_class" name="checkbox[]" type="checkbox" />5

    <input class="textbox_class" name="textbox[]" type="text" value="D"/>

    <input class="checkbox_class" name="checkbox[]" type="checkbox" />1
    <input class="checkbox_class" name="checkbox[]" type="checkbox" />2
    <input class="checkbox_class" name="checkbox[]" type="checkbox" />3
    <input class="checkbox_class" name="checkbox[]" type="checkbox" />4
    <input class="checkbox_class" name="checkbox[]" type="checkbox" />5

    <input class="textbox_class" name="textbox[]" type="text" value="E"/>

    <input class="checkbox_class" name="checkbox[]" type="checkbox" />1
    <input class="checkbox_class" name="checkbox[]" type="checkbox" />2
    <input class="checkbox_class" name="checkbox[]" type="checkbox" />3
    <input class="checkbox_class" name="checkbox[]" type="checkbox" />4
    <input class="checkbox_class" name="checkbox[]" type="checkbox" />5


</div>

如何获取为文本框检查的值为＆＃34; A＆＃34;，＆＃34; B＆＃34;，＆＃34; C＆＃34;，＆＃34; D＆＃34;，＆＃34; E＆＃34; seperatly ???

Answer 1

我要做的是按集合分组，意思是：

给出一组A：

一个文本框，以及一个或多个复选框：

所以我会创建一个name=""属性，相应地对它们进行分组。例如：

这将是最初的标记：

<form method="POST">
    <div class="data_class">
        <div class="fieldset" data-group="A">
            <input class="textbox_class" name="form_values[A][textbox]" type="text" />
            <input class="checkbox_class" name="form_values[A][checkbox][]" type="checkbox" value="1" />1
            <input class="checkbox_class" name="form_values[A][checkbox][]" type="checkbox" value="2" />2
            <input class="checkbox_class" name="form_values[A][checkbox][]" type="checkbox" value="3" />3
            <input class="checkbox_class" name="form_values[A][checkbox][]" type="checkbox" value="4" />4
            <input class="checkbox_class" name="form_values[A][checkbox][]" type="checkbox" value="5" />5
        </div>
    </div>
    <button type="button" id="spawn">Spawn More</button><br/>
    <input type="submit" name="submit" />
</form>

产生其他字段集：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

    $('#spawn').on('click', function(){
        var $initial = $('div.fieldset:last').clone();
        // or just increment a number instead
        var next = String.fromCharCode($initial.attr('data-group').charCodeAt(0) + 1);
        $initial.children('.textbox_class').attr('name', 'form_values['+next+'][textbox]');
        $initial.children('.checkbox_class').attr('name', 'form_values['+next+'][checkbox][]');
        $('.data_class').append('<div class="fieldset" data-group="'+next+'">'+$initial.html()+'</div>');
    });

});
</script>

所以在PHP中，提交后会出现类似这样的内容：

if(isset($_POST['submit'])) {
    $values = $_POST['form_values'];
    echo '<pre>';
    print_r($values);
    echo '</pre>';
}

输出：

Array
(
    [A] => Array
    (
        [textbox] => test1
        [checkbox] => Array
            (
                [0] => 1
                [1] => 2
            )

    )

    [B] => Array
    (
        [textbox] => test2
        [checkbox] => Array
            (
                [0] => 4
                [1] => 5
            )

    )
)

Sample Demo

注意：这只是一个例子，如果你想要一个简单的密钥，只需使用数字密钥。

从动态创建的文本框和链接到文本框的复选框中获取值

1 个答案: