2014-01-21 7 views
0

У меня есть 6 флажков на моей странице и кнопка отправки. Я хочу сохранить состояние флажка после перезагрузки. Кнопка «Отправить» перезагружает мою страницу. У меня есть следующее.jQuery не получает последнее состояние checkbox

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" 
pageEncoding="ISO-8859-1"%> 
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
    <html> 
    <head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script> 
    <script src="../js/cookie.jquery.js"></script> 
    <script> 
    $(document).ready(function(){ 
    $("input.box").each(function() { 
    var mycookie = $.cookie($(this).attr('name')); 
    if (mycookie) { 
    $(this).prop('checked', mycookie); 
    } 
    }); 
    $("input.box").change(function() { 
    $.cookie($(this).attr("name"), $(this).prop('checked'), { 
    path: '/', 
    expires: 365 
    }); 
    }); 
}); 
</script> 
</head> 
<body> 
    <input class="box" type="checkbox" name="1" value = " One "> One<br/> 
    <input class="box" type="checkbox" name="2" value = " Two "> Two<br/> 
    <input class="box" type="checkbox" name="3" value = " Three "> Three<br/> 
    <input class="box" type="checkbox" name="4" value = " Four "> Four<br/> 
    <input class="box" type="checkbox" name="5" value = " Five "> Five<br/> 
    <input class="box" type="checkbox" name="6" value = " Six "> Six<br/> 
    <input type="Submit" value = " Submit " onClick = " javascript:window.location.reload(); "> 
</body> 
</html> 

Я очистил свой кеш и запустил это. Я получил точный результат в первый раз. Со второго раза неконтролируемые значения не сохраняются, но сохраненные значения сохраняются. Кто-нибудь может мне помочь?

+0

Пробовал проверять, а затем убрав? –

+0

Попробуйте другой браузер? Если вы используете Firefox, это известно тем, что эта проблема связана с формами. –

+0

@Florian F: да, я тоже пробовал это. @ SwitchingBrains: используя хром. –

ответ

3

Попробуйте

$(document).ready(function() { 
    $("input.box").each(function() { 
     var mycookie = $.cookie(this.name); 
     if (mycookie) { 
      $(this).prop('checked', true); 
     } 
    }); 
    $("input.box").change(function() { 
     if (this.checked) { 
      $.cookie(this.name, true, { 
       path: '/', 
       expires: 365 
      }); 
     } else { 
      $.removeCookie(this.name, { 
       path: '/' 
      }); 
     } 
    }); 
}); 

Демо: Fiddle

Почему ваш код не работает?
cookie сохраняет значение как строку, поэтому при снятии отметки значение checked будет ложным (логическим), которое будет храниться как 'false (строка), которое при использовании для установки значения будет считаться истинным, поскольку строка false является истинное значение

Предлагаемое решение заключается в удалении файла cookie, если флажок снят.

+0

Скриншот не работает !!! Сначала я выбрал все значения, нажав кнопку «Отправить». Опять же, я отменил выбор и Submit, все варианты выделены! –

+0

@AnushaHoney см. Обновление –

0

Это потому, что данные cookie всегда являются строкой, в вашем случае "true" или "false".

И когда вы пишете $(this).prop('checked', mycookie); вы передаете prop метод строковых, который преобразуется в Boolean типа, как true.

Чтобы исправить это, вы можете написать:

var isChecked = (mycookie === 'true'); 
$(this).prop('checked', isChecked); 

вместо:

if (mycookie) { 
    $(this).prop('checked', mycookie); 
} 
Смежные вопросы