如何在javascript中操作表单字段值答案

【问题标题】：How to manipulate form field values in javascript如何在javascript中操作表单字段值
【发布时间】：2009-07-06 13:17:33
【问题描述】：

我正在尝试获取几个复选框的值并将它们输入到隐藏的表单字段中。

我的复选框如下所示：

<form>
  <input type="checkbox" name="chicken" id="chicken" value="chicken"/>Chicken
  <input type="checkbox" name="meat" id="meat" value="meat"/>Meat
</form>

<form method="post" action="">
   <input type="hidden" name="my-item-name" value="" />
   <input type="submit" name="my-add-button" value=" add " /> 
</form>

我只需要提交隐藏字段数据，因此我希望在勾选复选框时更改隐藏字段的值。因此，如果第一个复选框被勾选，我希望隐藏字段的值变为鸡肉，如果它们都被勾选，则值应该是鸡肉，肉。

我正在使用以下 javascript

function SetHiddenFieldValue()
{
  var checks = document.getElementsByName("checkbox");
  var hiddenFieldVal = "";

  for(i = 0; i < checks.length; i++)
  {

    if(hiddenFieldVal != "")
       hiddenFieldVal += ",";
    hiddenFieldVal += checks[i].value;
  }

  document.getElementById('my-item-name').value = hiddenFieldVal;
}

但是当我添加项目时，它会同时添加它们，它不会检查哪个已被检查，有没有办法解决这个问题，所以当第一个项目被检查时，它只会添加该项目，如果两者都被选中，它将添加以逗号分隔的 2 个项目，

【问题讨论】：

标签： javascript

【解决方案1】：

for(i = 0; i < checks.length; i++)
{
    if (!checks[i].checked)
        continue;
    ....
}

【讨论】：

【解决方案2】：

您需要为复选框赋予相同的名称以将它们分组：

<input type="checkbox" name="food[]" id="chicken" value="chicken"/>Chicken
<input type="checkbox" name="food[]" id="meat" value="meat"/>Meat

在你的 JavaScript 函数中：

function SetHiddenFieldValue() {
    var checks = document.getElementsByName("food[]");
    var hiddenFieldVal = "";
    for (var i=0; i<checks.length; i++) {
        if (checks[i].checked) {
            if (hiddenFieldVal != "")
                hiddenFieldVal += ",";
            hiddenFieldVal += checks[i].value;
        }
    }
    document.getElementById('my-item-name').value = hiddenFieldVal;
}

【讨论】：

【解决方案3】：

你忘记测试检查了[i].checked

function SetHiddenFieldValue() { 
  var checks = document.getElementsByName("checkbox");
  var hiddenFieldVal = ""; 
  for(i = 0; i < checks.length; i++) {
    if (checks[i].checked) {
      if(hiddenFieldVal != "")
        hiddenFieldVal += ",";
      hiddenFieldVal += checks[i].value;
      }
    }
  }
  document.getElementById('my-item-name').value = hiddenFieldVal; 
}

【讨论】：

【解决方案4】：

您最好将值放入数组中，这样可以更轻松地创建逗号分隔值。如果您稍后添加更多选项，也可以轻松得多。

function SetHiddenFieldValue()
{
    var checks = document.getElementsByName("checkbox");
    var foods = new Array();
    for (i = 0; i < checks.length; i++)
    {
        if (checks[i].checked)
        {
           foods[i] = checks[i].value; 
        }
    }
    document.getElementById('my-item-name').value = foods.join(",");
}

【讨论】：