使用带有jQuery的复选框将密码字段更改为文本

如何通过取消选中复选框来将密码字段切换为文本和密码？

Answer 1

这是你在找什么？

Answer 2

更新： 这里的实例

改变类型与$('#blahinput').attr('type','othertype')在IE中是不可能的，考虑到IE对输入元素的type属性的only-set-it-once规则。

您需要删除文本输入并添加密码输入，反之亦然。

 $(function(){ $("#show").click(function(){ if( $("#show:checked").length > 0 ){ var pswd = $("#txtpassword").val(); $("#txtpassword").attr("id","txtpassword2"); $("#txtpassword2").after( $("") ); $("#txtpassword2").remove(); $("#txtpassword").val( pswd ); } else{ // vice versa var pswd = $("#txtpassword").val(); $("#txtpassword").attr("id","txtpassword2"); $("#txtpassword2").after( $("") ); $("#txtpassword2").remove(); $("#txtpassword").val( pswd ); } }); }) 

这里的实例

Answer 3

勾选复选框时使用onChange事件，然后将输入的类型切换为文本/密码。

例：

Answer 4

你可以使用这样的东西

 $("#showHide").click(function () { if ($(".password").attr("type")=="password") { $(".password").attr("type", "text"); } else{ $(".password").attr("type", "password"); } }); 

访问这里了解更多信息http://voidtricks.com/password-show-hide-checkbox-click/

Answer 5

我相信你可以打电话

 $('#inputField').attr('type','text'); 

和

 $('#inputField').attr('type','password'); 

取决于复选框状态。

Answer 6

切换复选框的焦点事件并确定复选框的状态并将该字段更新为nesscarry

 $box = $('input[name=checkboxName]'); $box.focus(function(){ if ($(this).is(':checked')) { $('input[name=PasswordInput]').attr('type', 'password'); } else { $('input[name=PasswordInput]').attr('type', 'text'); } }) 

Answer 7

我在制作中有以下内容。 它克隆具有切换类型的新字段。

 toggle_clear_password = function( fields ) { // handles a list of fields, or just one of course fields.each(function(){ var orig_field = $(this); var new_field = $(document.createElement('input')).attr({ name: orig_field.attr('name'), id: orig_field.attr('id'), value: orig_field.val(), type: (orig_field.attr('type') == 'text'? 'password' : 'text') }) new_field.copyEvents(orig_field); // jquery 'copyEvents' plugin orig_field.removeAttr('name'); // name clashes on a form cause funky submit-behaviour orig_field.before(new_field); orig_field.remove(); }); } 

JQuery不只是让你获取type属性并更改它，至少不是我最后一次尝试。

Answer 8

       
   change 
   

Answer 9

.attr（’type’）被jQuery团队阻止，因为它不适用于某些版本的IE。

考虑使用此代码：

 $('#inputField').prop('type','text'); $('#inputField').prop('type','password'); 

Answer 10

的oncheck

 $('#password').get(0).type = 'text'; 

onuncheck

 $('#password').get(0).type = 'password'; 

Answer 11

这可以更简单地实现：

适用于jQuery 1.6+