CODEWITHSUNDEEP
javascriptjqueryhtml
Lone Rider
Lone Rider

Reputation: 97

Retain Multiple Radio Buttons checked after page refresh

In a form there are 2 group of radio buttons.

In the first group named Result, there are 4 option: id="ok", id="fa", id="fp", id="bp".

In the second group named ResultCategories, there are 9 option: id="cat1" .... id="cat9".

What I want:

a. If ok is clicked, ResultCategories will be unchecked (if already checked).

b. If fp or bp is clicked, cat9 of ResultCategories will be checked.

c. If one of the cat1 to cat8 of ResultCategories is clicked, fa of Result will be checked.

d. When radio buttons are clicked page will refresh and checked radio buttons remain checked.

I got a to c working but d is not working. It retains checked radio for only one group.

Here is what tried:

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
    <div class="container">
        <form action="" method="POST">
            <fieldset class="scheduler-border">
                <legend class="scheduler-border">Quality Check</legend>
                <div style="float: right;">
                    <button type="submit" id="submit" name="submit" class="btn btn-info">Complete</button>
                </div>
                <br />
                <br />
                <br />
                <div class="row">
                    <div class="column">
                        <div id="Result">
                            <label>Result:</label>
                            <label class="radioContainer">Ok 

                                <input type="radio" name="Result" id ="ok" value="1" />
                                <span class="circle"></span>
                            </label>
                            <label class="radioContainer">Fasle Alarm 
                                <input type="radio" name="Result" id="fa" value="2" />
                                <span class="circle"></span>
                            </label>
                            <label class="radioContainer">False Pass 
                                <input type="radio" name="Result" id="fp" value="3" />
                                <span class="circle"></span>
                            </label>
                            <label class="radioContainer">Blatant Pass 
                                <input type="radio" name="Result" id="bp" value="4" />
                                <span class="circle"></span>
                            </label>
                        </div>
                    </div>
                    <br />
                    <div class="column">
                        <div id="ResultCategories">
                            <label>Result Categories:</label>
                            <div>
                                <label class="radioContainer">Cat 1 
                                    <input type="radio" name="ResultCategories" id="cat1" value="1" />
                                    <span class="circle"></span>
                                </label>
                                <label class="radioContainer">Cat 2 
                                    <input type="radio" name="ResultCategories" id="cat2" value="2" />
                                    <span class="circle"></span>
                                </label>
                                <label class="radioContainer">Cat 3 
                                    <input type="radio" name="ResultCategories" id="cat3" value="3" />
                                    <span class="circle"></span>
                                </label>
                                <label class="radioContainer">Cat 4 
                                    <input type="radio" name="ResultCategories" id="cat4" value="4" />
                                    <span class="circle"></span>
                                </label>
                                <label class="radioContainer">Cat 5 
                                    <input type="radio" name="ResultCategories" id="cat5" value="5" />
                                    <span class="circle"></span>
                                </label>
                                <label class="radioContainer">Cat 6 
                                    <input type="radio" name="ResultCategories" id="cat6" value="6" />
                                    <span class="circle"></span>
                                </label>
                                <label class="radioContainer">Cat 7 
                                    <input type="radio" name="ResultCategories" id="cat7" value="7" />
                                    <span class="circle"></span>
                                </label>
                                <label class="radioContainer">Cat 8 
                                    <input type="radio" name="ResultCategories" id="cat8" value="8" />
                                    <span class="circle"></span>
                                </label>
                                <label class="radioContainer">Cat 9 
                                    <input type="radio" name="ResultCategories" id="cat9" value="9" />
                                    <span class="circle"></span>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </fieldset>
        </form>
    </div>
</body>
<script>   $('input:radio').click(function() {
        location.reload();   }); </script>

I have added a fiddle here: Fiddle

$(document).ready(function() {

  var result_dom = $('input[name="Result"]');
  var categories_dom = $('input[name="ResultCategories"]');
  var cat9 = $('#cat9');
  var fa = $('#fa')

  result_dom.on('change', function() {
    var checked_val = $(this).val();
    if (checked_val == 1) {
      categories_dom.prop('checked', false);
    } else if (checked_val == 3 || checked_val == 4) {
      cat9.prop('checked', true);
    }
  });

  categories_dom.on('change', function() {
    var checked_val = $(this).val();
    if (checked_val >= 1 && checked_val <= 8) {
      fa.prop('checked', true);
    }
  });

});

$(document).ready(function(){
  if(localStorage.selected) {
    $('#' + localStorage.selected ).attr('checked', true);
  }
  $('.radio').click(function(){
    localStorage.setItem("selected", this.id);
  });
});

How can I retain both group of radio buttons checked?

Updated Code:

<head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
      <script>
          $(document).ready(function() {

        var result_dom = $('input[name="Result"]');
        var categories_dom = $('input[name="ResultCategories"]');
        var cat9 = $('#cat9');
        var fa = $('#fa')

        result_dom.on('change', function() {
        var checked_val = $(this).val();
        if (checked_val == 1) {
          categories_dom.prop('checked', false);
        } else if (checked_val == 3 || checked_val == 4) {
          cat9.prop('checked', true);
        }
        });

        categories_dom.on('change', function() {
        var checked_val = $(this).val();
        if (checked_val >= 1 && checked_val <= 8) {
          fa.prop('checked', true);
        }
        });

        });$(document).ready(function() {

        var result_dom = $('input[name="Result"]');
        var categories_dom = $('input[name="ResultCategories"]');
        var cat9 = $('#cat9');
        var fa = $('#fa')

        result_dom.on('change', function() {
        var checked_val = $(this).val();
        if (checked_val == 1) {
          categories_dom.prop('checked', false);
        } else if (checked_val == 3 || checked_val == 4) {
          cat9.prop('checked', true);
        }
        });

        categories_dom.on('change', function() {
        var checked_val = $(this).val();
        if (checked_val >= 1 && checked_val <= 8) {
          fa.prop('checked', true);
        }
        });

        });

        $(document).ready(function(){
          //get the selected radios from storage, or create a new empty object
          var radioGroups = JSON.parse(localStorage.getItem('selected') || '{}');

          //loop over the ids we previously selected and select them again
          Object.values(radioGroups).forEach(function(radioId){
            document.getElementById(radioId).checked = true;
          });

          //handle the click of each radio
          $('.radio').on('click', function(){
            //set the id in the object based on the radio group name
            //the name lets us segregate the values and easily replace
            //previously selected radios in the same group
            radioGroups[this.name] = this.id;
            //finally store the updated object in storage for later use
            localStorage.setItem("selected", JSON.stringify(radioGroups));
          });
        });
      </script>
    </head>

    <body>
      <div class="container">
        <form action="" method="POST">
          <fieldset class="scheduler-border">
            <legend class="scheduler-border">Quality Check</legend>
            <div style="float: right;"><button type="submit" id="submit" name="submit" class="btn btn-info">Complete</button></div>
            <br /> <br /> <br />
            <div class="row">
              <div class="column">
                <div id="Result">
                  <label>Result:</label>
                    <label class="radioContainer">Ok
                    <input class="radio" type="radio" name="Result" id ="ok" value="1">
                    <span class="circle"></span>
                    </label>
                    <label class="radioContainer">Fasle Alarm <input class="radio" type="radio" name="Result" id="fa" value="2">
                    <span class="circle"></span>
                    </label>
                    <label class="radioContainer">False Pass <input class="radio" type="radio" name="Result" id="fp" value="3" >
                    <span class="circle"></span>
                    </label>
                    <label class="radioContainer">Blatant Pass <input class="radio" type="radio" name="Result" id="bp" value="4">
                    <span class="circle"></span>
                  </label>
                </div>
              </div>
              <br />
              <div class="column">
                <div id="ResultCategories"><label>Result Categories:</label>
                  <div>
                    <label class="radioContainer">Cat 1 <input class="radio" type="radio" name="ResultCategories" id="cat1" value="1">
                    <span class="circle"></span>
                    </label>
                    <label class="radioContainer">Cat 2 <input class="radio" type="radio" name="ResultCategories" id="cat2" value="2">
                    <span class="circle"></span>
                    </label>
                    <label class="radioContainer">Cat 3 <input class="radio" type="radio" name="ResultCategories" id="cat3" value="3">
                    <span class="circle"></span>
                    </label>
                    <label class="radioContainer">Cat 4 <input class="radio" type="radio" name="ResultCategories" id="cat4" value="4">
                    <span class="circle"></span>
                    </label>
                    <label class="radioContainer">Cat 5 <input class="radio" type="radio" name="ResultCategories" id="cat5" value="5">
                    <span class="circle"></span>
                    </label> <label class="radioContainer">Cat 6 <input class="radio" type="radio" name="ResultCategories" id="cat6" value="6">
                    <span class="circle"></span>
                    </label>
                    <label class="radioContainer">Cat 7 <input class="radio" type="radio" name="ResultCategories" id="cat7" value="7">
                    <span class="circle"></span>
                    </label> <label class="radioContainer">Cat 8 <input class="radio" type="radio" name="ResultCategories" id="cat8" value="8">
                    <span class="circle"></span>
                    </label>
                    <label class="radioContainer">Cat 9 <input class="radio" type="radio" name="ResultCategories" id="cat9" value="9">
                    <span class="circle"></span>
                    </label>
                  </div>
                </div>
              </div>
            </div>
          </fieldset>
        </form>
      </div>
    </body>
    <script>
      $('input:radio').click(function() {
        location.reload();
      });
    </script>

Upvotes: 0

Views: 2565

Answers (1)

Taplar
Taplar

Reputation: 24965

$(document).ready(function(){
  //get the selected radios from storage, or create a new empty object
  var radioGroups = JSON.parse(localStorage.getItem('selected') || '{}');
  
  //loop over the ids we previously selected and select them again
  Object.values(radioGroups).forEach(function(radioId){
    document.getElementById(radioId).checked = true;
  });
  
  //handle the click of each radio
  $('.radio').on('click', function(){
    //set the id in the object based on the radio group name
    //the name lets us segregate the values and easily replace
    //previously selected radios in the same group
    radioGroups[this.name] = this.id;
    //finally store the updated object in storage for later use
    localStorage.setItem("selected", JSON.stringify(radioGroups));
  });
});

Upvotes: 1

Related Questions