记住单选按钮选择 [英] remember radio button selections
问题描述
我有以下代码工作完美。它允许用户使用单选按钮喜欢或不喜欢每个帖子。复选框是允许用户显示/隐藏所有喜欢或不喜欢的帖子的开关。
I have the following code that works perfectly. It allows the user to 'like' or 'dislike' each post with radio buttons. The checkboxes are switches that allow the user to show/hide all liked or disliked posts.
问题是，我需要页面记住单选按钮选择叶和回报。这需要cookie吗？如果是，我该如何实现呢？
The problem is, I need the page to remember the radio button selections when the user leaves and returns. Would this require cookies? If so, how do i implement it?
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Unhide on checkboxes/radio buttons</title>
<link rel="stylesheet" type="text/css" href="_styles.css" media="screen" />
<script type="text/javascript">
function radioGroupValue(groupObj)
{
//Check if there is only one option (i.e. not an array)
if (!groupObj.length)
{
return (groupObj.checked) ? groupObj.value : false;
}
//Multiple options, iterate through each option
for (var i=0; i<groupObj.length; i++)
{
if (groupObj[i].checked)
{
return groupObj[i].value;
}
}
//No option was selected
return false;
}
function toggleLayer(formObj)
{
var showLikes = document.getElementById('show_likes').checked;
var showDislikes = document.getElementById('show_dislikes').checked;
var postIndex = 1;
while(document.getElementById('post_'+postIndex))
{
var liked = radioGroupValue(formObj.elements['like_'+postIndex])
var display = ((!showLikes && liked==='1') || (!showDislikes && liked==='0')) ? 'none' : '';
document.getElementById('post_'+postIndex).style.display = display;
postIndex++;
}
}
</script>
</head>
<body>
<form action="" method="post">
<fieldset>
<legend>Unhide Layer Form</legend>
<ul>
<p><input id="show_likes" name="show_likes" type="checkbox" value="1" checked="checked" onclick="toggleLayer(this.form);" /><label for="b1">Show Likes:</label> </p>
<p><input id="show_dislikes" name="show_dislikes" type="checkbox" value="1" checked="checked" onclick="toggleLayer(this.form);" /><label for="b1">Show Disikes:</label> </p>
</ul>
<label>Email:</label>
<input type="email" />
</fieldset>
<br><br>
<fieldset>
<legend>Posts</legend>
<div id="post_1" class="post">
<b>Post #1</b><br>
Content of post #1<br>
<p><input type="radio" name="like_1" value="1"><label for="like1a">Like</label></p> <p><input type="radio" name="like_1" value="0" onclick="toggleLayer(this.form);"><label for="like1b"> Dislike</label></p>
</div>
<div id="post_2" class="post">
<b>Post #2</b><br>
Content of post #2<br>
<p><input type="radio" name="like_2" value="1"><label for="like2a">Like</label></p> <p><input type="radio" name="like_2" value="0" onclick="toggleLayer(this.form);"><label for="like2b"> Dislike</label></p>
</div>
<div id="post_3" class="post">
<b>Post #3</b><br>
Content of post #3<br>
<p><input type="radio" name="like_3" value="1"><label for="like3a">Like</label></p> <p><input type="radio" name="like_3" value="0" onclick="toggleLayer(this.form);"><label for="like3b"> Dislike</label></p>
</div>
<div id="post_4" class="post">
<b>Post #4</b><br>
Content of post #4<br>
<p><input type="radio" name="like_4" value="1"><label for="like4a">Like</label></p> <p><input type="radio" name="like_4" value="0" onclick="toggleLayer(this.form);"><label for="like4b"> Dislike</label></p>
</div>
<div id="post_5" class="post">
<b>Post #5</b><br>
Content of post #5<br>
<p><input type="radio" name="like_5" value="1"><label for="like5a">Like</label></p> <p><input type="radio" name="like_5" value="0" onclick="toggleLayer(this.form);"><label for="like5b"> Dislike</label></p>
</div>
<div id="post_6" class="post">
<b>Post #6</b><br>
Content of post #6<br>
<p><input type="radio" name="like_6" value="1"><label for="like6a">Like</label></p> <p><input type="radio" name="like_6" value="0" onclick="toggleLayer(this.form);"><label for="like6b"> Dislike</label></p>
</div>
<div id="post_7" class="post">
<b>Post #7</b><br>
Content of post #7<br>
<p><input type="radio" name="like_7" value="1"><label for="like7a">Like</label></p> <p><input type="radio" name="like_7" value="0" onclick="toggleLayer(this.form);"><label for="like7b"> Dislike</label></p>
</div>
</form>
？
推荐答案
如果您希望其他人看到喜欢的内容（如计数），请使用 AJAX 将数据发送到某处的存储数据库。这是它可以加载的页面。如果你只是喜欢存储个人用户的选择，我仍然建议AJAX，而不是保存计数器保存每个用户的是/否答案，并张贴在数据库中的表。为了节省空间，最好只存储是的答案，并假设其他人是一个没有。
If you want others to see the likes (as in a count) look into using AJAX to send the data to a storage database somewhere. This was it can be loaded with the page. If you are only interested in storing the individual users choices I would still recommend AJAX but instead of saving a counter save the yes/no answer for each user and post into a table in a database. To save space it would be better perhaps to only store the yes answers and assume the others to be a no.
这篇关于记住单选按钮选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
