复选框以显示/隐藏多个文本输入

Question

我有一个带有onClick操作的HTML复选框输入。

<input type="checkbox" name="vendor_same_address" id="vendor_same_address" value="y" onclick="if(this.checked) { document.getElementById('vendor_address_number').hidden='true' }" />

我希望能够在check / uncheck

上显示/隐藏多个文本输入

使用onClick操作的最佳方式是什么？

Answer 1

您可以使用jQuery执行此操作。为此，请执行以下操作：

1. 从输入标记中删除onClick事件。
2. 使用jQuery change event
绑定此复选框
3. 为每个文本框提供相同的类属性，您想要显示/隐藏
4. 通过使用$ .each方法，您可以选择该类并显示隐藏文本框输入

例如：

$(document).ready(function(){
    $('#vendor_same_address').change(function(){
        $('.uniqueclass').each(function(){
            $(this).show();
        });
    });
});

要获得快速帮助，请参阅http://api.jquery.com/each/

Answer 2

但是，如果您打算使用Javascript，

... onclick="if(this.checked) { document.getElementById('vendor_address_number').style.visibility='hidden';}" />

应该没问题 或者

... onclick="if(this.checked){
document.getElementById('vendor_address_number').hidden='hidden';}" />

无论如何，请确保在javascript中使用;结束命令。这有时可能是失败的原因。

问候，指关节

Answer 3

在jQuery中：

您显然需要将#example_element更改为您计划隐藏或显示的输入

$("#example_element").hide();

$("#vendor_same_addres").change(function() {
  if($(this).is(":checked")) {
    $("#example_element").show();
  } else {
    $("#example_element").hide();
  }
});