根据无线电是或否选择显示或隐藏表单

Question

我试图使用Jquery根据用户选择的内容显示更多或更少的表单。 如果用户选择“是”，则显示更多表单。 我打算用许多不同的顶级问题做这个，然后根据是或否解锁更多问题。

在这个链接，这显示了我拥有的。 http://jcsites.juniata.edu/students/bookhjr10/flashpoint/test2.html

我遇到的问题是用户需要检查是两次才能使问题消失但是当用户检查不是时它应该关闭。

代码：JQuery

$(document).ready(function(){


   $('.show_hide').showHide({            
        speed: 1000,  // speed you want the toggle to happen    
        easing: '',  // the animation effect you want. Remove this line if you dont want an effect and if you haven't included jQuery UI
        changeText: 0, // if you dont want the button text to change, set this to 0
        showText: 'Yes',// the button text to show when a div is closed
        hideText: 'No' // the button text to show when a div is open

    }); 


});

</script>

HTML表单：

<form class="form-signin" role="form">
 I am having a Cloud My Office log in issue
<input type="radio" name="myofficeissue" id="0" value="No">No
<input type="radio" name="myofficeissue" class="show_hide" rel="#slidingDiv"  id="1" value="Yes">Yes
    <div id="slidingDiv">
        I am having a username and password issue.
      <input type="radio" name="passwordissue" id="passwordissue-0" value="No">No
      <input type="radio" name="passwordissue" class="show_hide" rel="#slidingDiv_2" id="passwordissue-1" value="Yes">Yes
    </div>   
 <a href="#" class="show_hide" rel="#slidingDiv_2"></a><br />
    <div id="slidingDiv_2">
    I need to reset my password
      <input type="radio" name="password" id="password-0" value="No" checked="checked" required> No
      <input type="radio" name="password" id="password-1" value="Yes" required>   Yes
      </br>
        My username needs updated.
      <input type="radio" name="username" id="username-0" value="No" checked="checked" required> No
      <input type="radio" name="username" id="username-1" value="Yes" required> Yes</br>
My account is locked out
<input type="radio" name="locked" id="locked-0" value="No" checked="checked" required> No
      <input type="radio" name="locked" id="locked-1" value="Yes" required> Yes</br>
I am experiencing other problems
      <input type="radio" name="other" id="other-0" value="No" checked="checked" required>No
      <input type="radio" name="other" id="other-1" value="Yes" required>Yes</br>
    </div> 
</div>

CSS

<style>

body{
font-family:Verdana, Geneva, sans-serif;
font-size:14px;}

#slidingDiv, #slidingDiv_2{
    display:none;
}


</style>

我的问题是。 这是做这样事情的最好方法吗？ 是否有一种方法可以使No选项关闭div？ 任何帮助表示赞赏。

Answer 1

我们可以使用jquery change事件来实现您的需求。

http://jsfiddle.net/mail2zam/vQ4Up/

$(document).ready(function(){
$("input:radio").change(function(){
    console.log(this);
    if(this.value == 'Yes' && this.name == 'myofficeissue'){
        $('#slidingDiv').slideDown();
    }else if(this.value == 'No' && this.name == 'myofficeissue'){
        $('#slidingDiv').slideUp();
        $('#slidingDiv_2').slideUp();
    }else if(this.value == 'Yes' && this.name == 'passwordissue'){
        $('#slidingDiv_2').slideDown();
    }else if(this.value == 'No' && this.name == 'passwordissue'){
        $('#slidingDiv_2').slideUp();
    }
});

}）;

Answer 2

我可以看到你的项目变得非常复杂，所以我认为在javascript中使用所有逻辑都不是正确的方法。 所以我在javascript中创建了一种逻辑控制器，并将逻辑需求分解为带有一些数据属性的html。

这是代码的实际应用。 该解决方案现在非常灵活且易于维护。 您需要做的就是将需要显示和消失的部分包装在div并为它们提供一个名为"data-view-conditions"的属性。 此属性可以包含需要满足的多个条件才能显示。

条件以逗号分隔，并包含输入名称和必需值。 然后由冒号分隔。 这支持无线电和复选框输入。 您也可以只提供一个没有值的名称，如果至少检查或选择该输入而不关心该值，则条件将“匹配”。 以下是一些示例条件。

data-view-conditions="name"

data-view-conditions="name:1"

data-view-conditions="name:1,name2:3,name3:test"

data-view-conditions="name4:123,name5"

JavaScript的：

jQuery(function($){

  // Prevents errors in old IE.
  if(!window.console || !window.console.log) window.console = {log: function(){}};

  // Enable debugging for complex logic.
  var debug = true;

  function checkConditions(inputs, views){
    views.each(function(){
      var view = $(this);
      var conditions = view.attr('data-view-conditions').split(',');
      var display = true;

      // Loop over all required conditions to be met.
      for(var i = 0; i < conditions.length; i++){
        var name = conditions[i].split(':')[0];
        var value = conditions[i].split(':')[1];
        var input = inputs.filter('[name="' + name + '"]:checked');

        if(debug) console.log('\nRecalculating view conditions.');

        if(!input.length){
          display = false;
          if(debug) console.log('View not show as no :checked input with the name "' + name + '" was found.');
        }else{
          if(value != undefined && input.val() != value){
            display = false;
            if(debug) console.log('View not show as no :checked input with the name "' + name + '" has the value of "' + input.val() + '". Value needed was: "' + value + '".');
          }
        }
      }

      if(display){
        view.css({display: 'block'});
      }else{
        view.css({display: 'none'});
      }

    });
  }

  $('form').each(function(){
    var form = $(this);
    var inputs = form.find('input[type="checkbox"], input[type="radio"]');
    var views = form.find('[data-view-conditions]');

    // Recalculate which views to be shown each time the inputs change.
    inputs.on('change', function(e){
      checkConditions(inputs, views);
    });

    // Check conditions to set up required view state on page load.
    checkConditions(inputs, views);
  });

});

HTML：

<form>

  <label for="i1">Input 1</label>
  <input id="i1" type="radio" name="name1" value="1">

  <label for="i2">Input 2</label>
  <input id="i2" type="radio" name="name1" value="2">

  <div data-view-conditions="name1:2">
    <p>Hello</p>
    <label for="i3">Click me</label>
    <input id="i3" type="checkbox" name="name2">

    <div data-view-conditions="name2">
      <p>It works!</p>
    </div>
  </div>

</form>

Answer 3

选择yes对第一个问题应该始终显示下一个问题， no应该总是隐藏下一个问题。 目前yes是在显示和隐藏之间切换。

与为第二个问题选择yes或no并显示后续问题相同。

就良好的用户界面而言，使用无线电输入您当前的方式感觉不对。 如果使用单选按钮，请将<input> radio <label>标签和<label>标签中的文本包装在一起，以便单击该文本选择无线电。 这为您的用户点击提供了更大的目标。 这同样适用于复选框。

当您必须选择三个或更多选项中的一个选项时，无线电输入更有意义。 两个作品，但只有两种可能性，通常有更合适的输入类型。 对于您的上一组问题，复选框比一系列无线电更有意义。