Show/hide div 单选按钮使用 Jquery Cookie

Question

我有一个带有单选按钮的表单。当我单击单选按钮时，会显示一个适当的 div。当页面加载时，所有 div 都被隐藏。它对我来说很好用。

但是如何使用 jquery cookie 插件修改此代码以记住上次选择的单选按钮并在页面刷新后显示适当的 div。

<form id='form-id'>
  <input name='test' type='radio' value="a" />A
  <br />
  <input name='test' type='radio' value="b" />B
  <br />
  <input name='test' type='radio' value="c" />C
</form>
<div id='show-me' style='display:none'>Hello</div>
<div id='show-me2' style='display:none'>Hello2</div>
<div id='show-me3' style='display:none'>Hello3</div>   

<script>   
  $("input[name='test']").click(function () {
    $('#show-me').css('display', ($(this).val() === 'a') ? 'block':'none');
    $('#show-me2').css('display', ($(this).val() === 'b') ? 'block':'none');
    $('#show-me3').css('display', ($(this).val() === 'c') ? 'block':'none');
  });
</script>

Answer 1

你可以试试这个：

// On reload apply the previous selection kept in cookie 
if($.cookie('selected') && $.cookie('shown')){
  $("input[name='test']"+"[value='"+$.cookie('selected')+"']").prop('checked', true)
  $("#"+$.cookie('shown')).css('display', 'block')
}

$("input[name='test']").click(function () {     
  $('#show-me').css('display', ($(this).val() === 'a') ? 'block':'none');
  $('#show-me2').css('display', ($(this).val() === 'b') ? 'block':'none');
  $('#show-me3').css('display', ($(this).val() === 'c') ? 'block':'none');

  $.cookie('selected', $(this).val()) //Keep selected element in cookie
  $.cookie('shown', $('div:visible').attr("id")) //Keep shown element in cookie
});

Show/hide div 单选按钮使用 Jquery Cookie

Show/hide div with radio button using Jquery Cookie

html

cookies

jquery

show-hide