如果选中相应的复选框，文本框应该可见

我有一个与其对应的文本框和复选框的列表。我只想让那些复选框已被用户检查过的文本框显示出来。我怎样才能做到这一点？如果选中相应的复选框，文本框应该可见

<input type="text" name="album_text[]" id="album_text" class="album_text" /> 
<input type="text" name="album_text[]" id="album_text" class="album_text" /> 
<input type="text" name="album_text[]" id="album_text" class="album_text" /> 

<input name="album_checkbox[]" type="checkbox" id="album_checkbox" value="' . $res. '"> 
<input name="album_checkbox[]" type="checkbox" id="album_checkbox" value="' . $res. '"> 
<input name="album_checkbox[]" type="checkbox" id="album_checkbox" value="' . $res. '">

眼下，在更新按钮的点击，所有文本框无论复选框变得可见：

$("#album_edit").click(function() { 


        $(".album_text").show(); 



     });

编辑：的texboxes和复选框在运行时动态生成的。

来源

2011-08-24 input

我要说的第一个问题是，您对多个对象使用相同的“ID”。这应该是独一无二的！如果你喜欢，你可以使用.eq（）属性，所以如果文本input.eq（0）被点击复选框input.eq（0）将是可见的。 – Tumharyyaaden

即使它们是，例如我在下面提供，将工作！但是在再次阅读时，我可能已经交换了文本输入字段和复选框，但是您可以更改这些类并且应该以其他方式工作！ – Tumharyyaaden

这里的工作实施例中，http://jsfiddle.net/JmqLH/

HTML：

<span class='textinput'> 
    <input type="text" name="album_text[]" id="album_text1" class="album_text" /> 
    <input type="text" name="album_text[]" id="album_text2" class="album_text" /> 
    <input type="text" name="album_text[]" id="album_tex3t" class="album_text" /> 
</span> <br> 
<span class='chkbx'> 
    <input name="album_checkbox[]" type="checkbox" id="album_checkbox1" value="' . $res. '"> 
    <input name="album_checkbox[]" type="checkbox" id="album_checkbox2" value="' . $res. '"> 
    <input name="album_checkbox[]" type="checkbox" id="album_checkbox3" value="' . $res. '"> 
</span>

JS：

$('span.chkbx input').hide(); 

$('.album_text').click(function(){ 
    var indexme = $(this).prevAll().length; 
    $('.chkbx input').eq(indexme).show(); 
});

更新1：http://jsfiddle.net/JmqLH/1/

更新2：http://jsfiddle.net/JmqLH/2/交换了两个输入类型JS ...

更新3：http://jsfiddle.net/JmqLH/3/在HTML中交换了两个输入组...

来源

2011-08-24 19:21:35 Tumharyyaaden

在运行时生成文本框和checboxes。 – input

检查更新jsfiddle在这里，http://jsfiddle.net/JmqLH/1/ – Tumharyyaaden

@tunharyyaaden，这应该是理想的工作，但它不工作。我想在用户选中要更新的数据复选框时显示文本框，然后单击编辑按钮。 – input

首先，你不应该对多个元素使用相同的id。您可以改为使用class选择器。然后，您可以分配相应的id，如album_text_1和album_checkbox_1，这将使下一步更不容易出错。

其次，你应该检查复选框checked：

var checkboxes = $('.album_checkbox'), 
    textFields = $('.album_text'); 

checkboxes.change(function() { 
    // Eg. replace album_checkbox_1 with album_text_1 
    var textField = $('#' + this.id.replace(/^_checkbox_/, '_text_')); 
    if(this.checked) { 
     textField.show(); 
    } else { 
     textField.hide(); 
    } 
});

如果您不能使用独特id S（您不必在标记控制），您可以使用.index()和.eq()代替只有当你确定每一组元素的顺序相匹配时。因此，这将是类似的代码上面，但更换线路6：

var textField = textFields.eq(checkboxes.index(this));

来源

2011-08-24 19:13:07 eyelidlessness

texboxes和复选框是在运行时动态生成的，所以我不能给它们唯一的ID。我尝试使用'eq'和'index'并将'id'改为'class'，但没有任何反应。没有文本框出现。 – input

我添加了一个自动递增的foreach循环到文本框和复选框，并将第6行更改为最初发布的第6行，但没有任何反应。它甚至不会抛出任何错误。 – input

是的，他们会的，因为它们都具有相同的ID和class..so当你$（“ album_text” ），所有文本框都会通过并显示出来。您需要找到一种机制，将唯一的文本框与复选框绑定/标识，然后在jquery代码中使用该唯一的id/class来显示文本框。

来源

2011-08-24 19:14:31 legendofawesomeness

如果选中相应的复选框，文本框应该可见

回答

相关问题