Question

如果在每个div中勾选复选框，我该如何显示文本输入？

例如，如果我选中第一个复选框，我想要显示“名称”输入。如果我选中最后一个div中的复选框，我希望它显示“电话”复选框。我怎么能用css或javascript或jquery做到这一点？

这是我的代码：

<style>
    .hidden {
        display: none;
    }
</style>

<div>
    <input type="checkbox">
    <input type="text" name="name" class="hidden">
</div>

<div>
    <input type="checkbox">
    <input type="text" name="email" class="hidden">
</div>

<div>
    <input type="checkbox">
    <input type="text" name="phone" class="hidden">
</div>

Answer 1

你可以使用js / jquery将事件附加到复选框，在事件处理程序中只需$ vagrant up VirtualBox is complaining that the installation is incomplete. Please run `VBoxManage --version` to see the error message which should contain instructions on how to fix this error. ubuntu@ip-172-31-26-135:~/vagrant_config$ vagrant up Bringing machine 'default' up with 'virtualbox' provider... ==> default: Box 'bento/ubuntu-16.04' could not be found. Attempting to find and install... default: Box Provider: virtualbox default: Box Version: >= 0 ==> default: Loading metadata for box 'bento/ubuntu-16.04' default: URL: https://vagrantcloud.com/bento/ubuntu-16.04 ==> default: Adding box 'bento/ubuntu-16.04' (v2.3.8) for provider: virtualbox default: Downloading: https://vagrantcloud.com/bento/boxes/ubuntu-16.04/versions/2.3.8/providers/virtualbox.box ==> default: Successfully added box 'bento/ubuntu-16.04' (v2.3.8) for 'virtualbox'! ==> default: Importing base box 'bento/ubuntu-16.04'... ==> default: Matching MAC address for NAT networking... ==> default: Checking if box 'bento/ubuntu-16.04' is up to date... ==> default: Setting the name of the VM: vagrant_config_default_1502307080428_76965 ==> default: Clearing any previously set network interfaces... ==> default: Preparing network interfaces based on configuration... default: Adapter 1: nat ==> default: Forwarding ports... default: 22 (guest) => 2222 (host) (adapter 1) ==> default: Running 'pre-boot' VM customizations... ==> default: Booting VM... ==> default: Waiting for machine to boot. This may take a few minutes... default: SSH address: 127.0.0.1:2222 default: SSH username: vagrant default: SSH auth method: private key Timed out while waiting for the machine to boot. This means that Vagrant was unable to communicate with the guest machine within the configured ("config.vm.boot_timeout" value) time period.下一个＆＃39; .hidden＆＃39;。这样的事情会起作用：

＆＃13;

let radians: CGFloat = CGFloat.pi
let x: CGFloat = 0.0
let y: CGFloat = 0.0
let z: CGFloat = 1.0

gradient.transform = CATransform3DMakeRotation(radians, x, y, z)

＆＃13;

toggle()

＆＃13;

Answer 2

您可以在toggle()事件的点击复选框的输入next上使用change。

＆＃13;

$('input[type="checkbox"]').change(function() {
  $(this).next().toggle()
})

＆＃13;

input.hidden {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="checkbox">
  <input type="text" name="name" class="hidden">
</div>
<div>
  <input type="checkbox">
  <input type="text" name="email" class="hidden">
</div>
<div>
  <input type="checkbox">
  <input type="text" name="phone" class="hidden">
</div>

＆＃13;

动态显示复选框检查输入

2 个答案: