CODEWITHSUNDEEP
jqueryangularcheckboxjquery-plugins
Ajith Deivam
Ajith Deivam

Reputation: 756

how to make drop down checkbox selected even i reload the page using Jquery and angular 4?

I am using angular 4 with integrated JQuery the form which contains drop down checkbox once the drop down field is selected should not be change even if I reload the page or until I re select.

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

            });
        });

Upvotes: 0

Views: 126

Answers (1)

Hrishikesh Kale
Hrishikesh Kale

Reputation: 6548

ad this code in your 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);

                });
            });

and this in 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>

Upvotes: 1

Related Questions