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

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

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

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 事件更改输入类型

how to change input type with onclick event in javascript

html

javascript

jquery

onclick

toggle