Question

我有一个文本框列表和与之对应的复选框。我想只显示那些文本框可见，其复选框已被用户检查过。我怎么能这样做？

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



        });

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

Answer 1

以下是工作示例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中交换了两个输入组......

Answer 2

首先，您不应对多个元素使用相同的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（您无法控制标记），则可以使用.index()和.eq()代替，但前提是您确定每组元素的顺序匹配。所以它与上面的代码类似，但用第6行代替：

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

Answer 3

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

如果选中相应的复选框，则应显示文本框

3 个答案: