Question

我在同一行中有一个复选框和一个文本框。最初将隐藏文本框的类型，当我单击复选框时，文本框的类型应从隐藏更改为文本。如果我取消选中它应该从类型文本更改为隐藏。我怎样才能做到这一点？这是我的代码：

 <div class="row">
            <div class="col-xs-6 col-sm-6 col-md-6">
                <div class="form-group">
            <input type="checkbox" name="Customer_Web" value="yes" style="float:left;">  <h4 align="left" style="font-size:16px; margin-left:20px !important;">Web Designing</h4>
                </div>
            </div>
            <div class="col-xs-6 col-sm-6 col-md-6">
                <div class="form-group">
                <input type="hidden" name="Web_Designing_Details" placeholder="Web Designing Details" class="form-control input-md" >

                </div>
            </div>
  </div>

Answer 1

您可以将显示设置为无或阻止或使用jQuery方法显示和隐藏，而不是更改input的类型，您可能正在寻找输入类型text的可见性。

Live Demo

$('.row :checkbox').change(function(){    
    $('.form-control.input-md')[0].style.display = this.checked ? 'block' : 'none'; 
});

Answer 2

如果您想隐藏输入（不要关心类型），可以使用toggleClass，如下所示：

$('YOUR_INPUT').toggleClass('hidden', $('YOUR_CHECKBOX').is(':checked'));

Answer 3

使用jQuery根据复选框的状态显示和隐藏它

$('#nameOfElement').show();
$('#nameOfElement').hide();

Answer 4

将文本框的类型从隐藏更改为文本。

<强> HTML

<input type="text" name="Web_Designing_Details" placeholder="Web Designing Details" class="form-control input-md hidden" >

<强> JQUERY / JAVASCRIPT

$(document).ready(function(){    

  $('input[name=Web_Designing_Details]').hide();

  $('input[name=Customer_Web]').change(function(){

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

如何在javascript中使用onclick事件更改输入类型

4 个答案: