我有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; } });