2014-01-21 2 views
0

내 페이지에는 6 개의 확인란과 제출 버튼이 있습니다. 다시로드 한 후 확인란의 상태를 유지하려고합니다. 제출 단추는 내 페이지를 다시로드합니다. 나는 다음과 같은 것을 가지고있다.jQuery 최근 체크 박스 상태가 표시되지 않습니다.

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

캐시를 지우고 실행했습니다. 1 회째 정확한 출력을 얻었습니다. 두 번째부터 검사되지 않은 값은 저장되지 않지만 체크 된 값은 저장됩니다. 어떤 사람이 나를 도울 수 있습니까?

+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

왜 코드가 작동하지?
쿠키 값을 문자열로 저장하므로 checked 값은 'false (문자열)로 저장되며, 문자열을 false으로 설정하면 false로 설정됩니다. truey 값

제안 된 솔루션은 확인란을 선택하지 않으면 쿠키를 제거하는 것입니다.

+0

바이올린이 작동하지 않습니다 !!! 먼저 모든 값을 선택하고 제출을 클릭합니다. 다시 옵션을 선택 취소하고 제출하면 모든 옵션이 선택됩니다! –

+0

@AnushaHoney 업데이트보기 –

0

쿠키 데이터는 항상 "true" 또는 "false" 인 경우 문자열이기 때문입니다.

$(this).prop('checked', mycookie);을 쓸 때 prop 메서드에 전달하면 Boolean 유형으로 변환되어 true으로 변환됩니다.

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

대신 :

이 당신이 쓸 수 있습니다 해결하려면

if (mycookie) { 
    $(this).prop('checked', mycookie); 
} 
관련 문제