Javascript在radiobutton上显示/隐藏

2019年7月28日 176次阅读

我有3个标有’Squat’,’Benchpress’和’Deadlift’的单选按钮,每个按钮显示和隐藏一个相关的下拉菜单,(我有3个下拉列表,但每次只显示一个,包含不同的数据)

虽然现在我已经添加了3个radiobutton,称为“Primary”,“Secondary”和“Assistance”.现在,如果主要&选择辅助radiobutton我不会看到任何下拉,只有当选择了辅助时才会显示.当选择Secondary时,它应该只是一个可见的,因为它现在！我似乎无法让它工作.

我包括这个小提琴,所以你可以得到一个视觉,看看我的意思！

$(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/

请问我是否解释得很糟糕！

最佳答案 您所需要的只是触发click事件处理程序到名称为“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

点赞