如何在jquery中创建onbox更改文本框？

Question

我有三个带一个标签的复选框。三个复选框就像这样

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

当我选择其他或最后一个复选框时，我想生成一个文本框以填充其他产品名称。

Answer 1

不选择生成它只需在选中复选框时显示

$('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>               
				<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 class="hidden">Hidden input<input type="checkbox"></div>
				</div>

Answer 2

你去吧

＆＃13;

＆＃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();
  }
});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

$(".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

用于更改复选框事件

Answer 4

添加一个文本框：

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