如何使用jQuery清空输入值?


72

我正在尝试创建一个包含图像的模式对话框,您可以在其中选择多个图像。我需要从输入中获取值,然后将其清空,但是我无法清空输入。我尝试了.val('').val(null),但都没有为我工作。

这是完整的代码:

$("#hdselect").click(function(){
        $(".modal").html("");

        $.post('mediaservice.php',{hd:'ok',images:$("#hdimages").val()},function(data){
            $(".modal").append(data);
        });
        $(".modal").dialog({
            'modal':true,
            'title':"Click the image to select",
            'width':960,
            'height':600,
            'resizable':false,
            'show': {effect: 'drop', direction: "up"},
            'buttons': {"Ok": function() {  
                    var hd=Array();
                    var hdval=$("#hdimages").val();
                    $("#hdimages").attr('value',' ');
                    $("input[name='hd[]']:checked").each(function(){
                        hd.push($(this).val());
                    });
                    if(hdval!=''){
                        hdval=hdval+","+hd;
                    }else{
                        hdval=hd;
                    }                        
                    $("#hdimages").val(hdval);
                    var images=$("#hdimages").val();
                    $.post('mediaservice.php',{getHd:images},function(data){
                        $("#imgthumbBase").append(data);
                    });
                    $(this).dialog("close");
                }
            }
        });
    });

这个想法是,用户单击一个按钮,然后将打开一个模态对话框,其中包含多个图像和复选框。此时,我需要从输入中获取值,然后清除它。


6
$('input').val('')会做的工作。 活生生的例子- jsfiddle.net/fQMmp/1 你有没有相关的图片意味着什么?
TJ VanToll 2012年

我不太了解您要做什么,但是$('#inputid')。val(''); 肯定会清除输入的值。查看您的代码,我实际上在任何地方都看不到.val('')吗?
大卫·马斯特斯

请提供更多背景信息,否则无法说明为什么代码无法正常工作。
克里斯多夫

1
不好意思地说,但是您发布的代码没有意义。清除val只是为了再次设置它,然后再次检索该值,尽管您已将该值存储在变量中。
克里斯多夫

@VitKos对此进行了查看:pastebin.com/EEdQEmwY它与您的代码具有相同的功能,但模糊性较低。另外,您还应该将dom元素存储到变量中:var $hdimages = $("#hdimages");
Christoph

Answers:


68

您可以尝试:

$('input.class').removeAttr('value');
$('#inputID').removeAttr('value');

1
@VitKos我想这是您代码中的另一个问题,而您jsut意外使它起作用了
Christoph

1
@Christoph也许。所以我要求社区给我看。
维特·科斯

1
这没有用,但是.val(“”)对我有用。包括两者以防万一对方不起作用。
Abhishek Biswal '16

3
等待-这是公认的答案吗?我只是尝试了一下,但它对我没有用。您确定此代码正确吗?
亚当

11
从HTML5和2017开始-Chrome至少不再增加value attr。此代码不再起作用。
Routhinator

119

要使值为空,可以执行以下操作:

 $("#element").val('');

要获取选定的值,您可以执行以下操作:

var value = $("#element").val();

#element您要选择的元素的ID在哪里。


这将使值“”而不是NULL。
user1032531 '16

5
@ user1032531-问题是如何使用jQuery清空输入值,而不是如何为null元素分配值。在您否决我的答案之前,请先正确阅读问题。
达伦(Darren)

3
也许user1032531正在您的第一个短语上开始操作,以使值可以为空,您可以做...也许更清晰地编写 为,可以为空的值,您可以做...
Adam

27

更好的方法是:

$("#element").val(null);

1
从HTML5和2017开始-Chrome至少不再增加value attr。因此,这是唯一可在Chrome浏览器中使用的软件。尚未测试其他浏览器。
Routhinator

16

使用jquery清空文本框的常用方法是:

$('#txtInput').val('');

如果以上代码不起作用,请检查您是否能够获得输入元素。

console.log($('#txtInput')); // should return element in the console.

如果仍然遇到相同的问题,请发布您的代码。


8

另一种方法是:

$('#element').attr('value', '');

如果将文本写在输入字段上,则不会重置该值。因为该值不会在value attr内部。
Mahi

2
$('.reset').on('click',function(){
           $('#upload input, #upload select').each(
                function(index){  
                    var input = $(this);
                    if(input.attr('type')=='text'){
                        document.getElementById(input.attr('id')).value = null;
                    }else if(input.attr('type')=='checkbox'){
                        document.getElementById(input.attr('id')).checked = false;
                    }else if(input.attr('type')=='radio'){
                        document.getElementById(input.attr('id')).checked = false;
                    }else{
                        document.getElementById(input.attr('id')).value = '';
                        //alert('Type: ' + input.attr('type') + ' -Name: ' + input.attr('name') + ' -Value: ' + input.val());
                    }
                }
            );
        });

通过使用以上代码段,您可以重置整个表单,其中可能包含输入字段,复选框,单选按钮和选择字段。我们可以将所有这些类型的默认值的..
的Raji
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.