jeudi 9 septembre 2021

How to select only one checkbox at a time in JavaScript?

I am working on an ecommerce web app and there I have multiple checkboxes for product search. I want to make selection of checkboxes at a time. For example, if a user has selected first checkbox then when he wants to select another checkbox then first checkbox should be unchecked and second checkbox should be checked.

In the below script, I have got all the checkbox value (i.e. category, tag and subcategory group checkboxes) and accroding to the condition I have called updatelisting function to get data according to checkbox value. So now I want to make selection of only one checkbox from category and tag checkbox group so that I would be able to get correct product listing to display.

          function getcheckboxvalue(){
                var c = [], t = [], s = [];
                $('[name="category"]').each(function(i,e){
                    if($(e).is(':checked')){
                        c.push(e.value);
                    }
                })  
                var category = c.join();
                $('[name="tag"]').each(function(i,e){
                    if($(e).is(':checked')){
                        t.push(e.value);
                    }
                }) 
                var tag = t.join(); 
                $('[name="subcategory"]').each(function(i,e){
                    if($(e).is(':checked')){
                        s.push(e.value);
                    }
                }) 
                var subcategory = s.join();
                var min = document.getElementById("minprice").value;
                var max = document.getElementById("maxprice").value;
                if(null == category || category == ""){
                    category = 'NA';
                }
                if(null == tag || tag == ""){
                    tag = 'NA';
                }
                if(null == subcategory || subcategory == ""){
                    subcategory = 'NA';
                }
                if(null == min || min == ""){
                    min = '0';
                }
                if(null == max || max == ""){
                    max = '0';
                }
                if(category != "NA" && tag == "NA" && subcategory == "NA" && min == "0" && max == "0"){
                    updatelisting(category,tag,subcategory,min,max);
                }else if(category != "NA" && tag != "NA" && subcategory == "NA" && min == "0" && max == "0"){
                    updatelisting(category,tag,subcategory,min,max);
                }else if(category != "NA" && tag != "NA" && subcategory != "NA" && min == "0" && max == "0"){
                    updatelisting(category,tag,subcategory,min,max);
                }else if(category != "NA" && tag != "NA" && subcategory != "NA" && min != "0" && max != "0" && parseInt(max) > parseInt(min)){
                    updatelisting(category,tag,subcategory,min,max);
                }else if(category != "NA" && tag != "NA" && subcategory == "NA" && min != "0" && max != "0" && parseInt(max) > parseInt(min)){
                    updatelisting(category,tag,subcategory,min,max);
                }else if(category != "NA" && tag == "NA" && subcategory != "NA" && min == "0" && max == "0"){
                    updatelisting(category,tag,subcategory,min,max);
                }
                
            }

In the below ready function, I got category id from URL and whatever be the category ID, corresponding checkbox appears checked.

$(document).ready(function() {
            setTimeout(function() {
                debugger
                var id= '<%=ptype%>';
                var catid = id.split(",");
                var c = "", tag = "", sub = ""; 
                for(var i = 0; i < catid.length; i++){
                    c = parseInt(catid[i]);
                    if(c != 0 || c > 0){
                        document.getElementById("checkbox"+c).checked == true
                    }
                }
                var tid = '<%=ptag%>';
                var tagid = tid.split(",");
                for(var i = 0; i < tagid.length; i++){
                    tag = parseInt(tagid[i]);
                    c = parseInt(catid);
                    if(tag != 0 && c != 0){
                        document.getElementById("checkbox"+c+tag).checked = true;
                    }
                }
                
                var subcategoryid = '<%=psubcategory%>';
                var splitsid = subcategoryid.split(",");
                for(var i = 0; i < splitsid.length; i++){
                    sub = parseInt(splitsid[i]);
                    tag = parseInt(tagid[i]);
                    c = parseInt(catid);
                    if(sub > 0 && c > 0 && tag > 0){
                        document.getElementById("checkbox"+c+tag+sub).checked = true;
                    }
                }
            }, 2000);
        }); 

If anyone have any solution to do this, would be highly appreciable and helpful for me. You can ask me for any doubt.




Aucun commentaire:

Enregistrer un commentaire