如何通过jquery选择使用单选按钮选择的特定字段集?

时间:2017-09-25 11:50:57

标签: jquery forms

这里我有三个fieldset如果我选择第一个无线电输入,第一个形式的fieldset显示我选择第二个无线电输入然后第二个fieldset显示提交按钮。

请帮忙。

<form id="msform">
<!-- progressbar -->
<ul id="progressbar">
  <li class="active">Account Setup</li>
  <li>Social Profiles</li>
  <li>Personal Details</li>
</ul>
<!-- fieldsets -->
<fieldset>
        <div class="switch-field">
          <input type="radio" id="switch_3_left" name="switch_3" value="Social Media Seller" checked/>
          <label for="switch_3_left"><img src="images/Social.png"><h2>Social Media Seller</h2></label>
          <input type="radio" id="switch_3_center" name="switch_3" value="Online Store" />
          <label for="switch_3_center"><img src="images/Online.png"><h2>Online Store</h2></label>
          <input type="radio" id="switch_3_right" name="switch_3" value="no" />
          <label for="switch_3_right"><img src="images/Company.png"><h2>Exciting Company</h2></label>
        </div>
  <input type="button" name="next" id="btn-next" class="next action-button col-md-3" value="Next Step" />
</fieldset>
<fieldset id="left">
  <h2 class="fs-title">Social Profiles</h2>
  <h3 class="fs-subtitle">Your presence on the social network</h3>
  <input type="text" name="twitter" placeholder="Twitter" />
  <input type="text" name="facebook" placeholder="Facebook" />
  <input type="text" name="gplus" placeholder="Google Plus" />
  <input type="button" name="next" class="next action-button col-md-3" value="Next" />
</fieldset>
<fieldset id="center">
  <h2 class="fs-title">Personal Details</h2>
  <h3 class="fs-subtitle">We will never sell it</h3>
  <input type="text" name="fname" placeholder="First Name" />
  <input type="text" name="lname" placeholder="Last Name" />
  <input type="text" name="phone" placeholder="Phone" />
  <textarea name="address" placeholder="Address"></textarea>
  <input type="button" name="previous" class="previous action-button" value="Previous" />
  <input type="submit" name="submit" class="submit action-button" value="Submit" />
</fieldset>

以下是带有此代码的jquery详细信息,其中选中了每个单选按钮,它显示了相同的表单字段集。

  jQuery('<div class="quantity-nav"><div class="quantity-button quantity-up">+</div><div class="quantity-button quantity-down">-</div></div>').insertAfter('.quantity input');
jQuery('.quantity').each(function() {
  var spinner = jQuery(this),
    input = spinner.find('input[type="number"]'),
    btnUp = spinner.find('.quantity-up'),
    btnDown = spinner.find('.quantity-down'),
    min = input.attr('min'),
    max = input.attr('max');

  btnUp.click(function() {
    var oldValue = parseFloat(input.val());
    if (oldValue >= max) {
      var newVal = oldValue;
    } else {
      var newVal = oldValue + 1;
    }
    spinner.find("input").val(newVal);
    spinner.find("input").trigger("change");
  });

  btnDown.click(function() {
    var oldValue = parseFloat(input.val());
    if (oldValue <= min) {
      var newVal = oldValue;
    } else {
      var newVal = oldValue - 1;
    }
    spinner.find("input").val(newVal);
    spinner.find("input").trigger("change");
  });

});

请指导我。

谢谢。

0 个答案:

没有答案