Question

获取与复选框相关的文本字段值时出现问题。

我基本上有10个文本字段，每个字段都有一个与之相关的复选框。现在我正在努力实现的是，如果用户检查了一个复选框（然后提交表单）代码，以便在用户选中复选框时获取相应的文本值！

结构是这样的：

    <input type="checkbox" name="option1" id="option1"> 
<input type="text" class="textbox"><br />
    <input type="checkbox" name="option2" id="option2"> 
<input type="text" class="textbox"><br />
    <input type="checkbox" name="option3" id="option3"> 
<input type="text" class="textbox"><br />

我还有一些jQuery来限制他们可以检查的复选框的数量（哪种方法正常）：

<script>
jQuery.fn.limit = function(n) {
var self = this;
return this.click(function(){
return self.filter(":checked").length<=n; });
};
$("input:checkbox").limit(5);
</script>

不幸的是，我真的很难实现这一点，任何帮助都会受到极大的赞赏。

Answer 1

HTML

<input type="checkbox" name="checkbox[]" value="1" />
<input type="text" name="text_1" />
<input type="checkbox" name="checkbox[]" value="2" />
<input type="text" name="text_2" />
<input type="checkbox" name="checkbox[]" value="3" />
<input type="text" name="text_3" />

PHP

foreach($_POST['checkbox'] as $textbox){
    $string_values[] = $_POST['text_' . $textbox];
}

基本上给复选框一个存储位置值的数组名，在php中读取数组循环并将所有相应的文本框放在一个数组中。您应该在PHP脚本中执行相同类型的验证，例如。复选框太多了。

Answer 2

每个复选框都有一个唯一的id，option1到option10，然后对文本框执行相同操作。

name="text1" to name="text10"

当您查找帖子时，如果设置了option1，则获取text1值，如果设置了option6，则获取text6

Answer 3

我喜欢在元素上使用rel="[id]"来引用另一个操作：

<input type="checkbox" class="options" name="option1" id="option1" rel="textbox1"> 
<input type="text" id="textbox1" class="textbox" value="test 1"><br />
<input type="checkbox" class="options" name="option2" id="option2" rel="textbox2">
<input type="text" id="textbox2" class="textbox" value="test 2"><br />
<input type="checkbox" class="options" name="option3" id="option3" rel="textbox3">
<input type="text" id="textbox3" class="textbox" value="test 3"><br />

$('.options').click(function(){
    console.log($('#'+$(this).attr('rel')).val());
});

http://jsfiddle.net/BZXTr/

在单击的元素上使用rel，然后可以添加一个类，以便您可以找到.include元素值：

<input type="checkbox" class="options" name="option1" id="option1" rel="textbox1">
<input type="text" id="textbox1" class="textbox" value="test 1"><br />
<input type="checkbox" class="options" name="option2" id="option2" rel="textbox2">
<input type="text" id="textbox2" class="textbox" value="test 2"><br />
<input type="checkbox" class="options" name="option3" id="option3" rel="textbox3">
<input type="text" id="textbox3" class="textbox" value="test 3"><br />
<input type="button" id="show" value="Show all checked values"/>

$('.options').click(function(){
    $('#'+$(this).attr('rel')).toggleClass('include');
});
$('#show').click(function(){
    var values = [];
    $('input.include').each(function(){
        values.push(this.value);
    });
    console.log(values);
});

http://jsfiddle.net/BZXTr/1/

Answer 4

您可以在以下链接中看到完整代码

http://www.javascript-coder.com/javascript-form/javascript-get-check.phtml

如果选中复选框循环并检索相应的文本字段值

4 个答案: