如何在jQuery中创建复选框的文本框onchange？

-1

我有三个带有一个标签的复选框。三个复选框都是这样如何在jQuery中创建复选框的文本框onchange？

<label class="col-md-2 control-label" for="Checkboxes">Grains</label>    
 
<div class="col-md-10 columns">      
 
    <label class="checkbox-inline" for="Checkboxes_Apple"><input type="checkbox" name="Checkboxes" id="Checkboxes_Apple" value="Apple">Jawora</label>    
 
    <label class="checkbox-inline" for="Checkboxes_Orange"><input type="checkbox" name="Checkboxes" id="Checkboxes_Orange" value="Orange">Bajara</label>  
 
    <label class="checkbox-inline" for="Checkboxes_Bananas"><input type="checkbox" name="Checkboxes" id="Checkboxes_other" value="other">other</label> 
 
</div>

当我选择其他或最后一个复选框，然后我想生成用于灌装其它产品名称的一个文本框。

来源

2015-09-05 Dnyan

还有，如果你把一个刺伤的JavaScript，你会得到更多的帮助，一个很好的机会你自己第一。如果当时没有人帮忙，我今天下午会帮忙，但今天早上我必须去做一些事情。同时，阅读通过JavaScript处理DOM对象。 – Chris

$(".show").on('change', function() { 
    var id = $(this).attr('id'); 
    var label = $("label[for='"+$(this).attr('id')+"']"); 

    if ($(this).is(":checked")) { 
     //show textbox 
     console.log(id); 
     alert(label.text()); 
    } else { 
     //hide textbox 
    } 
});

fiddle

上的复选框变化事件的使用

来源

2015-09-05 11:57:12 guradio

不要产生它只是显示它当复选框被选中

$('input[name="Checkboxes"]').click(function(){ 
 
if($(this).is(":checked")){ 
 
    $('.hidden').show(); 
 
    } 
 
else{ 
 
    $('.hidden').hide(); 
 
    } 
 
    
 
});

.hidden{ 
 
    display:none; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label class="col-md-2 control-label" for="Checkboxes">Grains</label>    
 
\t \t \t \t <div class="col-md-10 columns">      
 
\t \t \t \t \t <label class="checkbox-inline" for="Checkboxes_Apple"><input type="checkbox" name="Checkboxes" id="Checkboxes_Apple" value="Apple">Jawora</label>    
 
\t \t \t \t \t <label class="checkbox-inline" for="Checkboxes_Orange"><input type="checkbox" name="Checkboxes" id="Checkboxes_Orange" value="Orange">Bajara</label>  
 
\t \t \t \t \t <label class="checkbox-inline" for="Checkboxes_Bananas"><input type="checkbox" name="Checkboxes" id="Checkboxes_other" value="other">other</label> 
 
        <div class="hidden">Hidden input<input type="checkbox"></div> 
 
\t \t \t \t </div>

来源

2015-09-05 11:59:45 kurt

添加文本框：

<label class="col-md-2 control-label" for="Checkboxes">Grains</label>    
<div class="col-md-10 columns">      
    <label class="checkbox-inline" for="Checkboxes_Apple"><input type="checkbox" name="Checkboxes" id="Checkboxes_Apple" value="Apple">Jawora</label>    
    <label class="checkbox-inline" for="Checkboxes_Orange"><input type="checkbox" name="Checkboxes" id="Checkboxes_Orange" value="Orange">Bajara</label>  
    <label class="checkbox-inline" for="Checkboxes_Bananas"><input type="checkbox" name="Checkboxes" id="Checkboxes_other" value="other">other</label> 
    <label class="text-box" for="other"><input type="text" id="txtOther" /></label> 
</div>

尝试：

<script type="text/javascript"> 
    $("#Checkboxes_other").click(function() { 
    if ($(this).is(":checked")) { 
     $("#txtOther").show(); 
    } else { 
     $("#txtOther").hide(); 
    } 
}); 
</script>

来源

2015-09-05 12:04:13

在这里你去

$('#Checkboxes_other').change(function() { 
 
    if ($(this).prop('checked')) { 
 
    // Check if an input already exists 
 
    if (!($(this).parent().find('#custom_type').length != 0)) { 
 
     // Append an input 
 
     $(this).parent().append('<input id="custom_type" type="text" placeholder="Type your value here">'); 
 
    } 
 
    } else { 
 
     // Remove the input if 'other' got unchecked 
 
     $(this).parent().find('#custom_type').remove(); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label class="col-md-2 control-label" for="Checkboxes">Grains</label> 
 
<div class="col-md-10 columns"> 
 
    <label class="checkbox-inline" for="Checkboxes_Apple"> 
 
    <input type="checkbox" name="Checkboxes" id="Checkboxes_Apple" value="Apple">Jawora</label> 
 
    <label class="checkbox-inline" for="Checkboxes_Orange"> 
 
    <input type="checkbox" name="Checkboxes" id="Checkboxes_Orange" value="Orange">Bajara</label> 
 
    <label class="checkbox-inline" for="Checkboxes_Bananas"> 
 
    <input type="checkbox" name="Checkboxes" id="Checkboxes_other" value="other">other</label> 
 
</div>

来源

2015-09-05 12:04:14

如何在jQuery中创建复选框的文本框onchange？

回答

相关问题