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

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

1 个答案: