HTML复选框和输入选项

HTML checkboxes and input options

本文关键字：选项 输入 复选框 HTML      更新时间：2023-09-26

我有10个复选框(多选(Html表单。如果用户选择选项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>

以下是您要查找的代码片段。它不是"仅仅"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>

$(".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。将class.anthevery添加到input标记中。应该让你们从正确的道路开始。

相关文章：