javascript - 如何在javascript变量中存储单选按钮值？

Question

我有这样的代码:

<script type="text/javascript">
function validate(form1) 
{
  if (document.getElementById('agent').checked)
  {
    alert("agent") // works
    var agent1=document.getElementById('agent').value;
    alert(agent1)  // does not work
  }
  if (document.getElementById('holding').checked)
  {
    var holding=document.getElementById('holding').value;
  }
  if(agent1=="agent" && holding=="holding")
  {
    alert("hiii") // does not work
  }
}

我的表格是这样的:

<form id="form-validation" method="post" name="form1" onSubmit="return validate(this);">
<div class="input-group">
  <input type="radio" name="booking_type" id="direct" value="direct" onclick="document.getElementById('hidethis').style.display='none';return true;" ><span>Direct</span>
  <input type="radio" name="booking_type" id="agent" value="agent" onclick="document.getElementById('hidethis').style.display='';return true;" onfocus="document.getElementById('agent').clicked"><span>Agent</span> 
</div>

<div class="form-group">
<label class="col-md-4 control-label" for="val_username">Reservation Status<span class="text-danger">*</span></label>
  <div class="col-md-6">
    <div class="input-group">
      <input type="radio" name="reservation_status" value="H" onClick="holdingRadionButtonClicked()" id="holding" checked> Holding 
      <input type="radio" name="reservation_status" value="C" onClick="confirmRadionButtonClicked()" id="confirm"> Confirm
    </div>
  </div>
</div>
<input type="submit" class="btn btn-info btn-primary " value="Submit" name="submit">
</form>

我想要的是，当我单击提交按钮时，单选按钮的值必须存储在变量中。

当我尝试获取控件时，它有效，但当我尝试获取值时，它不起作用。

Answer 1

您的代码的问题主要在于范围界定。您在作用域 {scope } 内声明变量，然后尝试在此作用域之外访问它们。这是行不通的。

if (1 == 1) {
    var x = true;
}
document.write(x);

上面的代码不会打印出true，而是打印出undefined，因为x仅存在于if (1 == 1) { }.

所以，像这样声明你的变量:

var x;
if (1 == 1) {
    x = true;
}
document.write(x);

这将起作用，因为 x 是为整个外部作用域或函数声明的。

下面是您的代码示例，仅修复了变量声明:

// this will check the checked radio in a group, and return the value
function getCheckedValue(el) {
  for (var i = 0, length = el.length; i < length; i++) {
    if (el[i].checked) {
      return el[i].value;
      break;
    }
  }
  return '';
}

function validate(form1) {
  var checkedbooking = getCheckedValue(document.getElementsByName('booking_type'));
  var checkedreservation = getCheckedValue(document.getElementsByName('reservation_status'));
  if (agent1 == "agent" && holding == "H") {
    alert('everything works');
  }
}

function validate(form1) {
  var agent1 = '';
  var holding = '';
  if (document.getElementById('agent').checked) {
    agent1 = document.getElementById('agent').value;
    alert(agent1)
  }
  if (document.getElementById('holding').checked) {
    holding = document.getElementById('holding').value;
  }
  if (agent1 == "agent" && holding == "H") {
    alert('everything works');
  }
  return false;
}

<form id="form-validation" method="post" name="form1" onSubmit="return validate(this);">
  <div class="input-group">
    <input type="radio" name="booking_type" id="direct" value="direct" onclick="document.getElementById('hidethis').style.display='none';return true;"><span>Direct</span>
    <input type="radio" name="booking_type" id="agent" value="agent" onclick="document.getElementById('hidethis').style.display='';return true;" onfocus="document.getElementById('agent').clicked"><span>Agent</span> 
  </div>

  <div class="form-group">
    <label class="col-md-4 control-label" for="val_username">Reservation Status<span class="text-danger">*</span>
    </label>
    <div class="col-md-6">
      <div class="input-group">
        <input type="radio" name="reservation_status" value="H" onClick="holdingRadionButtonClicked()" id="holding" checked>Holding
        <input type="radio" name="reservation_status" value="C" onClick="confirmRadionButtonClicked()" id="confirm">Confirm
      </div>
    </div>
  </div>
  <input type="submit" class="btn btn-info btn-primary " value="Submit" name="submit">
</form>

我对代码有一个改进建议，如下所示。这将按照预期使用 radio 的组名称，并通过循环遍历集合来检查选定的值(通过使用自定义函数；getcheckedValue())。从长远来看，这将使您的代码更加紧凑并且不易出错。

// this will check the checked radio in a group, and return the value
function getCheckedValue(el) {
  for (var i = 0, length = el.length; i < length; i++) {
    if (el[i].checked) {
      return el[i].value;
      break;
    }
  }
}

function validate(form1) {
  var checkedbooking = getCheckedValue(document.getElementsByName('booking_type'));
  var checkedreservation = getCheckedValue(document.getElementsByName('reservation_status'));
  if (checkedbooking && checkedreservation) {
    alert('I selected "' + checkedbooking + '" and "' + checkedreservation + '"');
  } else {
    alert('Oops, you forgot to select something');
  }
}

<form id="form-validation" method="post" name="form1" onSubmit="return validate(this);">
  <div class="input-group">
    <input type="radio" name="booking_type" id="direct" value="direct" onclick="document.getElementById('hidethis').style.display='none';return true;"><span>Direct</span>
    <input type="radio" name="booking_type" id="agent" value="agent" onclick="document.getElementById('hidethis').style.display='';return true;" onfocus="document.getElementById('agent').clicked"><span>Agent</span> 
  </div>

  <div class="form-group">
    <label class="col-md-4 control-label" for="val_username">Reservation Status<span class="text-danger">*</span>
    </label>
    <div class="col-md-6">
      <div class="input-group">
        <input type="radio" name="reservation_status" value="H" onClick="holdingRadionButtonClicked()" id="holding" checked>Holding
        <input type="radio" name="reservation_status" value="C" onClick="confirmRadionButtonClicked()" id="confirm">Confirm
      </div>
    </div>
  </div>
  <input type="submit" class="btn btn-info btn-primary " value="Submit" name="submit">
</form>