2014-01-20 3 views
1

У меня есть 3 флажка на моей странице. FIDDLEПомните значение флажка при повторном посещении той же страницы

<form> 
    <input type="checkbox" name="vehicle" value="Bike">I have a bike<br> 
    <input type="checkbox" name="vehicle" value="Car">I have a car <br> 
    <input type="checkbox" name="vehicle" value="Scooter">I have a Scooter <br> 
    <input type="submit" value=" Submit "> 
</form> 

Когда пользователь нажимает кнопку «Отправить», он переходит на другую страницу. Когда я снова перехожу на ту же страницу, я хочу увидеть значения, которые я ранее выбрал. Как я могу это сделать с помощью Javascript?

+1

вам нужно сохранить значение некоторых где ... в стороне клиента с помощью печенья/веб-хранилище или в стороне сервера –

+2

Java! = JavaScript –

ответ

2

Вам необходимо использовать файл cookie (или какое-либо другое постоянное хранилище) для хранения значений любого значения c hecked.

С помощью файла cookie вы можете сделать это, связав приемники событий с флажками, чтобы при обновлении (выбрано/отменено) cookie хранится (или обновляется) с их текущими значениями.

Когда страница изначально загружается, вы затем проверяете наличие файла cookie и заполняете поля соответственно.

Вот один из способов сделать это. Это использует jQuery cookie library.

<!DOCTYPE HTML> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Persist checkboxes</title> 
    </head> 

    <body> 
    <div> 
     <label for="checkAll">Check all</label> 
     <input type="checkbox" id="checkAll"> 
    </div> 
    <div> 
     <label for="option1">Option 1</label> 
     <input type="checkbox" id="option1"> 
    </div> 
    <div> 
     <label for="option2">Option 2</label> 
     <input type="checkbox" id="option2"> 
    </div> 
    <div> 
     <label for="option3">Option 3</label> 
     <input type="checkbox" id="option3"> 
    </div> 

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <script src="http://cdn.jsdelivr.net/jquery.cookie/1.4.0/jquery.cookie.min.js"></script> 

    <script> 
     $("#checkAll").on("change", function() { 
     $(':checkbox').not(this).prop('checked', this.checked); 
     }); 

     $(":checkbox").on("change", function(){ 
     var checkboxValues = {}; 
     $(":checkbox").each(function(){ 
      checkboxValues[this.id] = this.checked; 
     }); 
     $.cookie('checkboxValues', checkboxValues, { expires: 7, path: '/' }) 
     }); 

     function repopulateCheckboxes(){ 
     var checkboxValues = $.cookie('checkboxValues'); 
     if(checkboxValues){ 
      Object.keys(checkboxValues).forEach(function(element) { 
      var checked = checkboxValues[element]; 
      $("#" + element).prop('checked', checked); 
      }); 
     } 
     } 

     $.cookie.json = true; 
     repopulateCheckboxes(); 
    </script> 
    </body> 
</html> 
+0

Должен ли я должен сделать Java кодирования, если я реализую это? –

+0

Это не имеет ничего общего с Java. Однако вы можете скопировать этот пример и адаптировать его к вашим потребностям. Обратите внимание, что это не будет работать локально с некоторыми браузерами (например, Chrome) –

0

Если он находится в том же сеансе браузера, вы можете поддерживать его в сеансах.

ИЛИ

Установите печенье, чтобы запомнить выбранное значение

0

сохранить его в Cookie с помощью document.cookie как key=value пар, разделенных точкой с запятой:

document.cookie = "vehicle=Bike; name=Billy;" 

Затем посмотреть его, когда вы строите страницу

Смежные вопросы