页面刷新后保留选中多个单选按钮

时间:2018-08-10 15:46:50

标签: javascript jquery html

在表单中,有2组单选按钮。

在名为Result的第一个组中,有4个选项:id =“ ok”,id =“ fa”,id =“ fp”,id =“ bp”。

在第二个名为ResultCategories的组中,有9个选项:id =“ cat1” .... id =“ cat9”。

我想要什么:

a。如果单击“确定”,则将不选中ResultCategories(如果已选中)。

b。如果单击fp或bp,将检查ResultCategories的cat9。

c。如果单击ResultCategories的cat1到cat8之一,将检查Result的fa。

d。单击单选按钮时,页面将刷新,并且选中的单选按钮保持选中状态。

我可以使用c,但是 d无法使用。它仅保留一组广播电台。

这是尝试的方法:

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

我在这里添加了一个小提琴: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);
  });
});

如何保留两组选中的单选按钮?

更新的代码:

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

1 个答案:

答案 0 :(得分:0)

$(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));
  });
});