Question

我正在尝试获取一些复选框的值，并在隐藏的表单字段中输入它们。

我的复选框看起来像这样：

<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;
}

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

Answer 1

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

Answer 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;
}

Answer 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; 
}

Answer 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(",");
}

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

4 个答案: