点击下一步按钮,根据单选按钮选择,如何重定向步骤?

时间:2017-09-12 14:07:42

标签: javascript jquery twitter-bootstrap

在我的bootstrap中的逐步向导中,我希望能够更改它所采用的步骤。 这是我正在使用的代码 https://bootsnipp.com/snippets/e3MBM。 除了在第一步我有一个单选按钮:

<div class="form-group">
    <label for="assessmentType" class="control-label">Choose type</label> 
    <div class="row col-sm-12">
        <label class="radio-inline">
            <input type="radio" id="female" value="Female" name="radio">Female
        </label>

        <label class="radio-inline">
            <input type="radio" id="male" value="Male" name="radio">Male
        </label>
    </div>
</div>

如何制作它以便在选择男性时重定向到第3步,当选择女性时,它会重定向到第2步?

var val = $('input:radio[name=path]:checked').val();
switch (val) {
    case 'female':
        //show step 2 ?
        break;
    case 'male':
        //show step 3?
        break;
    default:
}

谢谢

2 个答案:

答案 0 :(得分:0)

使用toLowerCase()功能匹配区分大小写的字符串,并在显示匹配步骤

之前隐藏所有步骤

JS代码

var val = $('input:radio[name=path]:checked').val();
val = val.toLowerCase(); //change the case with small for matcing

switch (val) {
  case 'female':
 //hide all steps
 //then show the step2
      break;
  case 'male':
   //hide all steps
 //then show the step3
      break;
  default:
}

答案 1 :(得分:0)

大写女性和男性:

var val = $('input:radio[name=path]:checked').val();
switch (val) {
    case 'Female':
        //show step 2 ?
        break;
    case 'Male':
        //show step 3?
        break;
    default:
}