jQuery：附加表单输入值.val

问题描述

| 我试图根据是否已选中特定的复选框来编写多个值的字符串。即

$(\'#submit\').click(function() {
  if ($(\'#box1\').attr(\'checked\')) {
    $(\'#MyInput\').val(\'box1 \');
    alert(\'1\');
  }

  if ($(\'#box2\').attr(\'checked\')) {
    $(\'#MyInput\').val(\'box2 \');
    alert(\'2\');
  }
});

在这种情况下，我要寻找的返回值是\'1 2 \'，但是在输入字段中仅写入了第二个值。 警报告诉我参数中的两个事件都在触发。还有附加值的方法吗？     

解决方法

        

.val()

不会追加..它将值设置为您通过的值，覆盖先前的值。

$(\'#submit\').click(function() {

var myInput = $(\'#MyInput\').val(\'\')[0];


if($(\'#box1\').attr(\'checked\')){
    myInput.value += \'box1 \';
    alert(\'1\');
    }

if($(\'#box2\').attr(\'checked\')){
     myInput.value += \'box2 \';
    alert(\'2\');
    }

else {}

});

并且如果您有多个复选框，并且希望将其所有值都添加到myInput元素（如果选中），则可以向所有它们添加一个类，然后执行

$(\'#submit\').click(function() {
  var myInput = $(\'#MyInput\').val(\'\')[0];
  $(\'.common-class-to-all:checked\').each(function(){
     myInput.value += this.value + \' \';
  });
});

演示http://jsfiddle.net/SQcGq/     ,        您每次都要替换

MyInput

的值。

.val

不会添加到输入字段的值上，而是将其替换。

var value = [];

if ($(\'#box1\').prop(\'checked\')) {
  value.push(\'box1\');
}

if ($(\'#box2\').prop(\'checked\')) {
  value.push(\'box2\');
}

$(\"#MyInput\").val(value.join(\' \'));

    ,        给这些框一个类似

boxes

的类，并使用

map()

[docs]方法获取值的集合，使用

get()

[docs]方法将其转换为数组，并使用

.join()

将它们连接为字符串。 然后使用

val()

[docs]方法将结果字符串一次设置为值。

$(\'#submit\').click(function() {

    var values = $(\'.boxes\').map(function() {
        return this.checked ? this.id : \'\';
    }).get().join(\' \');

    $(\'#MyInput\').val( values );

});

编辑：要求是使用等于ID的字符串作为结果。固定。感谢@Bryan的注意。     ,        我想这是拼写错误？在第一个

if

中检查\“ checked \”值，在第二个

if

中检查\“ checked \”属性 如果您使用jQuery 1.6+，则应使用

$(\'#box1\').prop(\"checked\")

检查/修改此演示：http://jsfiddle.net/roberkules/45WgD/

$(\'#submit\').click(function() {

    var values = [];
    $(\"#box1,#box2\").filter(\":checked\").each(function(i,box){
        values.push($(box).attr(\"id\"));
    });

    $(\'#MyInput\').val(values.join(\" \"));

}）;     ,        执行ѭ17会覆盖文本框的值，这就是为什么只看到第二个值的原因，这应该起作用：

$(\'#submit\').click(function() {

  var new_val = \'\';

  if($(\'#box1\').is(\':checked\')){
    new_val += \'box1 \';
  }

  if($(\'#box2\').is(\':checked\')){
    new_val += \'box2 \';
  }

  $(\'#MyInput\').val(new_val);

else {}

});