HTML-флажки и опции ввода

Question

У меня есть 10 флажок (несколько вариантов) Html-форма. Если пользователь выбирает Option1, в этом поле должно появляться текстовое поле с запросом на ввод номера. Аналогично, если флажок не установлен, не должно быть текстового поля. Какова должна быть идея примера кода?

Answer 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>

Answer 2

Вот фрагмент кода на то, что вы ищете. Это не «просто» html/css терминология. Но вам также понадобится понимание Javascript или, по крайней мере, JQuery.

$('.checkbox-group input[type=checkbox]').click(function(){ 
 
\t 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>

Answer 3

$(".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 и дать его класс = "тумблер". Это ваш исчезающий div. Добавить класс. Независимо от ввода тега. Если вы начнете на правильном пути.