即使我使用 Jquery 和 Angular 4 重新加载页面，如何选择下拉复选框？

Question

我正在使用带有集成 JQuery 的 Angular 4，一旦选择了下拉字段，则包含下拉复选框的表单不应更改，即使我重新加载页面或直到我重新选择。

dropdown.html：

<div class="chkdropdown">
          Show and Hide Columns
        <ul>
             <li>
               <input type="checkbox" class="hidecol" value="name" id="col_2" />&nbsp;S NO&nbsp;                
            </li>
            <li>
                <input type="checkbox" class="hidecol" value="name" id="col_3" />&nbsp;DrugName&nbsp;                
           </li>
           <li>
              <input type="checkbox" class="hidecol" value="salary" id="col_4" />&nbsp; Generic Name&nbsp;                  
           </li>
           <li>
              <input type="checkbox" class="hidecol" value="gender" id="col_5" />&nbsp;Generic Combination&nbsp;                    
            </li>
            <li>
                <input type="checkbox" class="hidecol" value="city" id="col_6" />&nbsp;Dosage &nbsp;              
              </li>
              <li>
                  <input type="checkbox" class="hidecol" value="email" id="col_7" />&nbsp;VAT &nbsp;               
                </li>
        </ul>
    </div>

ang.component.ts：

$(document).ready(function(){                       
            $(".hidecol").click(function(){

                var id = this.id;
                var splitid = id.split("_");
                var colno = splitid[1];
                var checked = true;                                        
                if($(this).is(":checked")){
                    checked = true;
                }else{
                    checked = false;
                }
                setTimeout(function(){
                    if(checked){
                        $('#drug_table td:nth-child('+colno+')').hide();
                        $('#drug_table th:nth-child('+colno+')').hide();
                    } else{
                        $('#drug_table td:nth-child('+colno+')').show();
                        $('#drug_table th:nth-child('+colno+')').show();
                    }

                }, 500);

            });
        });

Answer 1

在你的 jquery 中添加这段代码

    $(document).ready(function(){
//here i checked localstorage values
    var checkedvalues = JSON.parse(localStorage.getItem("checkedvalues"));
    console.log(checkedvalues);
//created obj to store check values
    var someObj={};
    someObj.checked=[];
//looped through checkvalues from local storge ad add checked property to its values
    $.each(checkedvalues, function(key, value) {
      console.log(key,value);
      $("#" + value).prop('checked', value);
      console.log($("#" + value));
    });
                $(".hidecol").click(function(){

                    var id = this.id;
                    var splitid = id.split("_");
                    var colno = splitid[1];
                    var checked = true;                                        
                    if($(this).is(":checked")){
                        checked = true;
//push chekced values in above created array.
                        someObj.checked.push($(this).attr("id"));
                        console.log(someObj.checked);
//add same values in local storage.
                        localStorage.setItem("checkedvalues", JSON.stringify(someObj.checked));

                    }else{
                        checked = false;
                    }
                    setTimeout(function(){
                        if(checked){
                            $('#drug_table td:nth-child('+colno+')').hide();
                            $('#drug_table th:nth-child('+colno+')').hide();
                        } else{
                            $('#drug_table td:nth-child('+colno+')').show();
                            $('#drug_table th:nth-child('+colno+')').show();
                        }

                    }, 500);

                });
            });

这在 html 中

<div class="chkdropdown">
          Show and Hide Columns
        <ul>
             <li>
               <input type="checkbox" class="hidecol" value="name" id="col_2" />&nbsp;S NO&nbsp;                
            </li>
            <li>
                <input type="checkbox" class="hidecol" value="name" id="col_3" />&nbsp;DrugName&nbsp;                
           </li>
           <li>
              <input type="checkbox" class="hidecol" value="salary" id="col_4" />&nbsp; Generic Name&nbsp;                  
           </li>
           <li>
              <input type="checkbox" class="hidecol" value="gender" id="col_5" />&nbsp;Generic Combination&nbsp;                    
            </li>
            <li>
                <input type="checkbox" class="hidecol" value="city" id="col_6" />&nbsp;Dosage &nbsp;              
              </li>
              <li>
                  <input type="checkbox" class="hidecol" value="email" id="col_7" />&nbsp;VAT &nbsp;               
                </li>
        </ul>
    </div>