0

I have a code where i m using some checkboxes on click of them i m appending the checkbox value in url with hash but when i go back or press back button url gets changes but checkbox remains checked.Please check the code as follows

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
$checkboxes = $('input[type=checkbox]');
$checkboxes.change(function(){
    window.location.hash = 'check=' + $checkboxes.filter(':checked').map(function(){
        return this.value;   
    }).get().join(",");
    //console.log(window.location.hash);
}); });</script>

<input type="checkbox" name="check" value="one">one<br>
<input type="checkbox" name="check" value="two">two<br>
<input type="checkbox" name="check" value="one">three<br>
<input type="checkbox" name="check" value="two">four<br><input type="checkbox" name="check" value="one">five<br>
<input type="checkbox" name="check" value="two">six<br><input type="checkbox" name="check" value="one">seven<br>
<input type="checkbox" name="check" value="two">eight<br>
</body>
</html>

Right now when i click back after checking some checkboxes,url gets changed.but the checkbox still remains checked.How can i make checkbox unchek after going back once i checked some checkboxes...

peter joseph
  • 15
  • 1
  • 5
  • 3
    this [link](http://stackoverflow.com/questions/8208627/how-to-capture-browsers-back-forward-button-click-event-or-hash-change-event-in) may be useful for you – Farshad Sep 07 '14 at 08:55
  • 2
    Maybe you can uncheck all the checkboxes on pageload in your ready method! – Siddharth Patel Sep 07 '14 at 09:03
  • @SiddharthPatel-when we append hash fragment in the end,in that case if we press back,then will pageload method be executed??? – peter joseph Sep 07 '14 at 10:38

1 Answers1

0

Here you can use hashchange function of javascript / jQuery.

window.onhashchange = function () {//add you logic here to check difference in url alert(window.location.hash);};

Or you can use jQuery's hashchange function.

$(window).on('hashchange', function() {
     alert(window.location.hash);
});

you can use any one of the above function to get manipulation on hash URL.

valar morghulis
  • 2,007
  • 27
  • 34
  • read the values for window.location.hash and use the comma separated values to check if hash values is equivalent to checkboxes currently checked, one thing you might have to pass special attribute along with one,two,one,two like index one-1,two-3, these numbers are index for your checkbox. //write the code within the function hashchange it will work. let me know if you want a full fledge working code – valar morghulis Sep 08 '14 at 05:40
  • Ya.it will be very helpful for me if u can write a snippet fr my checkboxes requirement above as I m very less experienced in js...please... – peter joseph Sep 08 '14 at 09:16
  • Please use this fiddle url ( http://jsfiddle.net/4monpsLv/ ) copy code and use it. It would have been simpler if the values for checkboxes have been different / unique. But you would still get the logic how to implement. I had made it utmost simpler for you to understand – valar morghulis Sep 09 '14 at 06:48
  • @Franky-Sir i dont want data index attribute.by mistake i wrote one and two values again for checkboxes.actually its in sequence from one,two,three,four and so on....so values are unique for each checkbox...Sir can u please manipulate it for the last time accordingly – peter joseph Sep 09 '14 at 12:07
  • Hi ! there, check now, i have updated the code ( http://jsfiddle.net/4monpsLv/4/ ) – valar morghulis Sep 09 '14 at 12:56