Question

我只是花了很多时间来试图解决这个问题。一点背景：我正在设计一个多步形式，其中一个步骤是在两个选项之间进行选择（两个都是单选按钮）。

因此，例如，第1步是选择性别“男性”或“女性”，第二步是在文本输入中输入内容。我遇到的问题是，当我选择性别时，它不会进入第二步。我还有一个问题，它确实进入第二步，但返回的值是“未识别”。

$('#gpadding input:radio').addClass('input_hide');
$('label').click(function() {
   $(this).addClass('selected').siblings().removeClass('selected');
});

var gender, fname, lname;
function _(x) {
   return document.getElementById(x);
}

function next1() {
      gender = _("gender").value;
      _("step1").style.display = "none";
      _("step2").style.display = "block";
}

function next2() {
   fname = _("firstname").value;
   lname = _("lastname").value;
      _("step2").style.display = "none";
      _("show_all_data").style.display = "block";
      _("display_gender").innerHTML = gender;
      _("display_fname").innerHTML = fname;
      _("display_lname").innerHTML = lname;
}

<div class="step" id="step1">
  <h3>Gender</h3>
  <div>
     <div class="gender-box">
        <div id="gpadding">
           <input type="radio" name="gender" id="gender" value="m" />
           <label for="malereg"><img src="images/icons/male-register.png" /><span>MALE</span></label>
           <input type="radio" name="gender" id="gender" value="f" />
           <label for="femalereg"><img src="images/icons/female-register.png" /><span>FEMALE</span></label>
        </div>
     </div>
     <button onclick="next1()">Next</button>
     <button id="bstep" class="md-close">Close</button>
     <div class="clearfix"></div>
  </div>
  </div>
  <div class="step" id="step2">
  <h3>Name</h3>
  <div>
     <input type="text" id="firstname" name="firstname" />
     <input type="text" id="lastname" name="lastname" />
     <button onclick="next2()">Next</button>
     <button id="bstep" class="md-close">Close</button>
     <div class="clearfix"></div>
  </div>
  </div>
  <div class="step" id="show_all_data">
  <h3>Complete</h3>
     <span id="display_gender"></span> <br />
     <span id="display_fname"></span> <br />
     <span id="display_lname"></span> <br />
     <button onlick="submitForm()">Register</button>
     <button id="bstep" class="md-close">Close</button>
  </div>

Answer 1

您无法在<div>内使用<label>。
确保ID 您定位的选择器实际存在。
您可以在标签内包装所有内容，而无需使用for和id属性：

function _(x)  { return document.getElementById(x); }
function _n(x) { return document.getElementsByName(x); } //Needed to get elements by Name

var gender, input;

function next1() {
  var radio = _n("gender"); // get the elements by Name !!

  for (var i=0, j=radio.length; i<j; i++) { // Loop all radio buttons
    if (radio[i].checked) {                 // If one is Checked...
        gender = radio[i].value;            // All fine
        _("step1").style.display = "none";
        _("step2").style.display = "block";
        break;                              // and exit the loop.
    }
  }
  if(!gender) return alert("Please select a gender"); // If no value, alert something
}

function next2() {
  input = _("input").value; // Use the right ID !!!!!
  if(!input) return alert("Please enter your name");

  _("step2").style.display = "none";
  _("show_data").style.display = "block";
  _("display_gender").innerHTML = gender;
  _("display_input").innerHTML = input;
}

label{display:block;}
#step1, #step2m #show_data{
  background:#eee;
  width:200px;
  padding:30px;
}
#step2, #show_data{display:none;}

    <div id="step1">
      <label>
        <input type="radio" name="gender" value="m">
        <img src="images/icon/male.png" />
        <span>MALE</span>
      </label>
      <label>
      <input type="radio" name="gender" value="f">
        <img src="img/icon/female.png">
        <span>FEMALE</span>
      </label>
      <button onclick="next1()">Next</button>
    </div>
    
    <div id="step2">
      <label>
        Enter your name:
        <input type="text" id="input" name="input">
      </label>
      <button onclick="next2()">Next</button>
    </div>
    
    <div id="show_data">
      <p id="display_gender"></p>
      <p id="display_input"></p>
    </div>

Answer 2

也许将您的代码更改为：

function next1() {

   var gender_controls = document.getElementsByName("gender");
   gender = gender_controls[0].checked ? gender_controls[0].value : gender_controls[1].value;

  _("step1").style.display = "none";
  _("step2").style.display = "block";
}

无法读取属性'价值'

2 个答案: