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。添加類。無論輸入標籤。應該讓你開始正確的道路。