使用 Jquery Cookie 显示/隐藏带有单选按钮的 div

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