Question

我在w3schools上看到了一个示例，其中显示了如何切换文本/密码输入的可见性。

我想有一些非常相似的东西，但它可以是一个可以切换动态添加的文本输入的复选框。

如下所示：

请注意，下面的代码不起作用。这是举例说明我的情况。我想知道如何调整链接上看到的代码，所以我使用的名称与w3schools上的示例相同

HTML

a = ["W", "", "X", "", "Y", "Z"]
b = ["a", "b", "c", "d", "e", "f"]

aNew,bNew = zip(*[(a[i], b[i]) for i in range(len(a)) if len(a[i]) > 0])

print(aNew) 
#('W', 'X', 'Y', 'Z')
print(bNew)
#('a', 'c', 'e', 'f')

的JavaScript

<div class="container_home">

  <form id="inputFrm_h" class="inputFrm_home" method="post">
    <input type="text" name="env_name[]" /> = 
    <input type="password" name="env_contents[]" id="myInput"/>
    <button class="add_form_field_home">Add</button>
    <input type="checkbox" onclick="myFunction()"/>
  </form>
</div>

Answer 1

我会使用数组来存储这些输入元素，当您单击“添加”按钮时，它将在页面和数组中创建并添加新输入。然后，当您单击该复选框时，它将执行for循环，然后该循环将运行您的数组并将类型从密码更改为文本（使字母可见）。

http://jsbin.com/risayiquha/edit?html,js,output

HTML

print(dir(ec2))

的JavaScript

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div id="inputs">

  </div>
  <button onclick="createInput();">Add Input</button>
  <input type="checkbox" onclick="changeValues(this);">
</body>
</html>

Answer 2

看起来你正在使用jQuery，所以你可以use that to select elements想要使用它，无论是一个还是多个。

在您的情况下，$('.inputFrm_home div')将选择div元素中附加的所有.inputFrm_home元素。这意味着$('.inputFrm_home div').remove()将删除所有匹配的元素。

将您的全部删除链接添加到html：

<div class="container_home">

  <form id="inputFrm_h" class="inputFrm_home" method="post">
    ...
  </form>

  <a href="#" class="remove-new-fields">Remove new fields</a>
</div>

然后是新链接的点击处理程序：

$(document).ready(function(){
  ...
  $('.container_home').on('click', '.remove-new-fields', function (e) {
    e.preventDefault();
    $('.inputFrm_home div').remove();
  });
});

或者，如果您想使用复选框来切换新字段而不是链接，您可以使用类似

的内容

$('.my-toggle-checkbox').on('change', function (e) {
  if($(this).prop('checked')) {
    // checkbox is checked
  }
  else {
    // checkbox is not checked
  }
})

一个复选框，用于显示/隐藏许多HTML密码输入

2 个答案: