HTML复选框和输入选项[关闭]

Posted

技术标签:

【中文标题】HTML复选框和输入选项[关闭]【英文标题】:HTML checkboxes and input options [closed] 【发布时间】:2016-01-01 09:42:13 【问题描述】:

我有 10 个复选框(多选)html 表单。如果用户选择 Option1,则应针对该选项显示一个文本框,要求输入数字。 同样,如果未选中复选框,则不应出现文本框。 示例代码思路应该是什么?

【问题讨论】:

您的问题到底出在哪里? SO 不是为编码你的东西而设计的。 您至少应该添加 HTML 和 CSS。人们是来帮助你的,而不是把所有的时间都花在编码上! 不需要任何编码,只需要在这种情况下使用 html/css 术语或类型。 【参考方案1】:

如果您想动态创建输入,您可以使用以下内容:

$(".myCheckbox").on("change", function() 
    var value = $(this).val();
    if (this.checked) 
        $(this).parent().append('<input id="checkboxInput'+value+'" type="text" maxlength="254" name="checkboxInput'+value+'">');
     else 
        $('#checkboxInput'+value).remove();
    
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">

  <div class="checkboxWrapper">
    <input class="myCheckbox" id="checkbox1" type="checkbox" name="someName[]" value="1" />
    <label for="checkbox1">Value 1</label>
  </div>

  <div class="checkboxWrapper">
    <input class="myCheckbox" id="checkbox2" type="checkbox" name="someName[]" value="2" />
    <label for="checkbox2">Value 2</label>
  </div>

  <div class="checkboxWrapper">
    <input class="myCheckbox" id="checkbox3" type="checkbox" name="someName[]" value="3" />
    <label for="checkbox3">Value 3</label>
  </div>

</div>

【讨论】:

【参考方案2】:
$(".whatever").click(function() 
if($(this).is(":checked")) 
   $(this).closest("li").find('.toggle').show(500);
 else 
     $(this).prop('checked',false);
      $(this).closest("li").find('.toggle').hide(500);

);

创建一个 div 并给它 class="toggle"。这是你消失的 div。添加类 .whatever 到输入标签。应该让你开始走上正确的道路。

【讨论】:

【参考方案3】:

这里是您要查找的代码 sn-p。它不是“只是”html/css 术语。但是您还需要了解 javascript 或至少 JQuery。

$('.checkbox-group input[type=checkbox]').click(function()
	var target = $(this).attr('data-target');
    $(target).fadeToggle('fast');
);
.checkbox-group
    position:relative;


.checkbox-group input[type='text']
    display:none;
    margin-left:15px;
    margin-bottom:20px;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
.
<div class="checkbox-container">
    <div class="checkbox-group">
        <input type='checkbox' value='Name' data-target="#inputname" /> Name <br/>
        <input type='text' id='inputname' placeholder="your name" />
    </div>
    
    <div class="checkbox-group">
        <input type='checkbox' value='Email' data-target="#inputemail" /> Email <br/>
        <input type='text' id='inputemail' placeholder="your email" />
    </div>
    
    <div class="checkbox-group">
        <input type='checkbox' value='Phone' data-target="#inputphone" /> Phone <br/>
        <input type='text' id='inputphone' placeholder="your phone" />
    </div>
        
    <div class="checkbox-group">
        <input type='checkbox' value='Age' data-target="#inputage" /> Age <br/>
        <input type='text' id='inputage' placeholder="your age" />
    </div>
</div>

【讨论】:

如果文本是复选框的标签会更好。

以上是关于HTML复选框和输入选项[关闭]的主要内容,如果未能解决你的问题,请参考以下文章

JQuery 脚本从输入框、复选框和选择元素的选项值合计值

当一个选项(复选框)打开时,是否可以单击多个复选框,而当它关闭时,您一次只能选择一个?

HTML 表单是个谜

android中EditText输入类型为啥不能设置为中文

【QML】复选框 CheckBox

如何更改复选框输入样式,以便用户点击标签而不是实际框?