勾选时显示输入框答案

【问题标题】：Show Input Box on Check勾选时显示输入框
【发布时间】：2012-03-08 19:55:58
【问题描述】：

您可以在随附的纸质表单中看到我需要转换为网络表单的内容。我希望它显示复选框并禁用输入字段，除非用户选中它旁边的框。我已经看到了使用一两个元素执行此操作的方法，但我想使用大约 20-30 个检查/输入对来执行此操作，并且不想多次重复相同的代码。我只是没有足够的经验来自己解决这个问题。任何人都知道任何地方解释如何做到这一点？谢谢！

附：最终，这些数据都将通过 PHP 的电子邮件发送。

【问题讨论】：

既然这不是动态的，为什么还要使用 JavaScript 或 jQuery？只需使用 IDE 构建表单。

标签： javascript jquery forms input checkbox

【解决方案1】：

我认为这根本不是一个好主意。

为用户着想。首先，他们必须点击输入一个值。因此，他们总是需要将手从鼠标改为键盘。这不是很好用。

为什么不只给出文本字段？使用电子邮件发送时，您可以省略空值。

【讨论】：

这很有意义。纸质表格有缺陷 - 为什么要勾选一个框来填写数字？让填写的数字表示检查，空白值表示不检查。完毕。如果您需要将检查值存储在数据库或类似的东西中，请在后端处理它。不要让我选中一个框，这样我就可以输入一个数字。
你知道，这是有道理的。我想我只是想把报纸的原样转换成原来的样子。有时你只是想多了:)
单选按钮更好。
@ChrisSobolewski 为什么会这样？不要使用它们中的任何一个！
与值 1,2 和 3 对应的单选按钮确保您的访问者只能以很少的开销输入已批准的值，以及“填充这三个气泡之一进行评分”的过程东西”很好理解。

【解决方案2】：

在您的 HTML 中：

//this will be the structure of each checkbox and input element.
<input type="checkbox" value="Public Relations" name="skills" /><input type="text" class="hidden"/> Public Relations <br/>

在您的 CSS 中：

.hidden{
  display:none;
}
.shown{
  display:block;
}

在你的 jQuery 中：

$('input[type=checkbox]').on('click', function () {
  // our variable is defined as, "this.checked" - our value to test, first param "shown" returns if true, second param "hidden" returns if false
  var inputDisplay = this.checked ? 'shown' : 'hidden';
  //from here, we just need to find our next input in the DOM.
  // it will always be the next element based on our HTML structure
  //change the 'display' by using our inputDisplay variable as defined above
  $(this).next('input').attr('class', inputDisplay );
});

玩得开心。

【讨论】：

太棒了，谢谢！！...几个错误：在attr 之前缺少.，在inputDisplay 之后也不需要}...所以该行应该是$(this).next('input').attr('class', inputDisplay);。 ..我还没有编辑权限 :) 管理员注意：它说我的编辑也不够长，但所有需要更改的只是添加 . 并删除 }...can'帮助它所需的变化是如此之小......谢谢！
为反映您发现的问题而进行的修改 - 道歉。此外，如果您不想遇到编辑问题，请确保您编辑 BODY 并包含类似 EDIT 1 的内容添加缺少的 \.\ 并删除了错误的 \}\ - 我喜欢逃避我的编辑。

【解决方案3】：

由于您声明的目标是减少重复输入代码，因此该线程的真正答案是获取 IDE 和 zen-coding 插件：

http://coding.smashingmagazine.com/2009/11/21/zen-coding-a-new-way-to-write-html-code/

http://vimeo.com/7405114

【讨论】：