Javascript Show/Hide 是单选按钮

Question

我有 3 个标记为 'Squat'、'Benchpress' 和 'Deadlift' 的单选按钮，每个按钮显示和隐藏关联的下拉菜单，（我有 3 个下拉菜单，但每次只显示一个，包含不同的数据）

尽管现在我又添加了 3 个单选按钮，分别称为 'Primary'、'Secondary' 和 'Assistance'。现在，如果选择了主要和辅助单选按钮，我根本不希望任何下拉菜单可见，只有在选择次要按钮时才可见。 And when Secondary is selected it should only be one visible as it is at the moment!我似乎无法让它工作。

我把这个 fiddle 包括在内，这样您就可以直观地了解我的意思！

$(function() {
  $("#datepicker").datepicker({ dateFormat: "yy-mm/dd" }).val()
});

//Script for hiding dropdown menus and showing the one connected
//to the right exercise based on which radiobutton is selected.
$(function() {
  $("input[type='radio']").change(function() {
    if ($(this).val() == 1  && this.checked) {
      $("#exerVariNameS").show();
      $("#exerVariNameB").hide();
      $("#exerVariNameD").hide();
    } else if ($(this).val() == 2  && this.checked){
      $("#exerVariNameS").hide();
      $("#exerVariNameB").show();
      $("#exerVariNameD").hide();
    } else if ($(this).val() == 3  && this.checked) {
      $("#exerVariNameS").hide();
      $("#exerVariNameB").hide();
      $("#exerVariNameD").show();
    }
  });
  //Remember which radiobutton was last clicked and keeps it that way
  //after a page refresh or form post.
  $('input[type=radio]').each(function() {
    var state = JSON.parse( localStorage.getItem('radio_'  + this.id) );
    if (state) this.checked = state.checked;
    $(this).trigger('change');
  });        
  $(window).bind('unload', function() {
    $('input[type=radio]').each(function() {
      localStorage.setItem('radio_' + this.id, JSON.stringify({checked: this.checked}));
    });
  });
});

https://jsfiddle.net/o7m0d4uu/4/

请问是不是我解释的不好！

Answer 1

您只需要触发一个 click 事件处理程序到带有 name="Type" 的单选按钮。

解决方法如下：

$("input[name='Type']").click(function(){
        var value=$(this).val();
        switch(value){
            case '4':
              $("input[name='Exercise']").each(function(){
                $(this).closest('div').hide();
              });
              $('#dropdown').hide();
              break;
            case '5':
              $("input[name='Exercise']").each(function(){
                  $(this).closest('div').show();
              });
              $('#dropdown').show();
              break;
            case '6':
              $("input[name='Exercise']").each(function(){
                $(this).closest('div').hide();
              });
              $('#dropdown').hide();
              break;
        }
});

这是一个有效的 solution

Javascript Show/Hide 是单选按钮

Javascript Show/Hide on radiobutton

html

javascript

jquery

show

hide