запомнить выбор радиокнопок - PullRequest
Новая
       34

запомнить выбор радиокнопок

1 голос
/ 26 августа 2011

У меня есть следующий код, который отлично работает. Это позволяет пользователю «нравится» или «не нравиться» каждый пост с переключателями. Флажки - это переключатели, которые позволяют пользователю отображать / скрывать все понравившиеся или не понравившиеся сообщения.

Проблема в том, что мне нужна страница, чтобы запомнить выбор переключателей, когда пользователь уходит и возвращается. Требуются ли для этого файлы cookie? Если да, то как мне это реализовать? 

    <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>

Есть указатели?

Ответы [ 3 ]

7 голосов
/ 26 августа 2011

Вы можете использовать localstorage: 

$(function()
{
    $('input[type=radio]').each(function()
    {
        var state = JSON.parse( localStorage.getItem('radio_'  + this.id) );

        if (state) this.checked = state.checked;
    });
});

$(window).bind('unload', function()
{
    $('input[type=radio]').each(function()
    {
        localStorage.setItem(
            'radio_' + this.id, JSON.stringify({checked: this.checked})
        );
    });
});​

localstorage поддерживается во всех современных браузерах, включая IE8.

Для более старых версий IE вы можете добавитьПоддержка легко (до вышеупомянутого сценария).

Вот скрипка .Поиграйте с переключателями, закройте окно, затем снова откройте его (или просто обновите).Вы увидите, что они сохраняют свое состояние.

0 голосов
/ 26 августа 2011

Если вы хотите, чтобы другие видели лайки (как в подсчете), изучите использование AJAX для отправки данных в базу данных хранения где-либо.Это было, это может быть загружено со страницей.Если вы заинтересованы только в сохранении выбора отдельных пользователей, я все равно рекомендую AJAX, но вместо сохранения счетчика сохраните ответ да / нет для каждого пользователя и разместите его в таблице в базе данных.Для экономии места было бы лучше, возможно, хранить только ответы «да» и считать, что остальные - «нет».

0 голосов
/ 26 августа 2011

Вместо файлов cookie лучшим подходом было бы реализовать это как решение для базы данных. Файлы cookie могут быть удалены, и это может стать противоречивым решением. Если вы хотите, чтобы этот выбор сохранялся до тех пор, пока пользователь активен в вашей системе, то сохраните свой выбор пользователя в базе данных и реализуйте логику рендеринга в соответствии с их предпочтениями сохранения и неприятия.

...