Setting values of checkboxes based on database values using jquery?-CodePudding

I have a form in which i have two checkboxes (Checkbox 1 and Checkbox 2).

Now, what i want is:

1.) If only Checkbox 1 is selected while adding the details then in edit mode only Checkbox 1 should be selected. (which is happening)

2.) If only Checkbox 2 is selected while adding the details then in edit mode only Checkbox 2 should be selected. (which is happening)

3.) If both of them were selected while adding the details then in edit mode both Checkboxes should be selected. (which is not happening)

If someone can point me in the right direction or point my mistake that would be really great.

I have already checked many solutions for this here but none of them works for me or you can point me towards the link which i may have missed.

I will add my jquery function as well as how i am storing them in database in comma separated way.

Checkboxes:-


<div class = "error_placement_checkbox">
<div align = "center"  id = "idcheckbox">
    <div align = "center" >
        <label> Checkboxes </label>
            <div >
                <div >
                    <input type = "checkbox" name = "p_act1" value = "Checkbox_1" >
                    <label> Checkbox 1 </label>
                </div>
            </div>
            <div >
                <div >
                    <input type = "checkbox" name = "p_act2" value = "Checkbox_2" >
                        <label> Checkbox 2 </label>
                </div>
            </div>
    </div>
</div>
</div>

My jquery function:-


<script type="text/javascript">
    
    $(document).ready(function()
    {       
        $('input[type="checkbox"]').each(function(index)
        {   
            if ($(this).val() == "<c:out value = '${product.p_act}' />")            
            ($(this).prop('checked' , true));
        });
    });
                
</script>

In my Controller Servlet:- // To store them in comma separated.


List<String> items = new ArrayList<>();
if (request.getParameter("p_act1") != null) { items.add (request.getParameter("p_act1")); }
if (request.getParameter("p_act2") != null) { items.add (request.getParameter("p_act2")); }
String p_act =  String.join(" , ", items);

Edit:-

This is my whole jquery function


<script type="text/javascript">
    
    $(document).ready(function()
    {
        $('input[type="checkbox"]').each(function(index)
        {   
//  console.log(this.value);                
            if ("<c:out value = '${product.p_act}' />".split(",").includes($(this).val()))          
            ($(this).prop('checked' , true));
//  console.log(this.value);                
        });
    });
                
</script>

edit2:-


    <script type="text/javascript">
    
        $(document).ready(function()
        {
            $('input[type="checkbox"]').each(function(index)
            {   
    console.log(this.value);                
                if ("11,22".split(",").includes($(this).val()))             
                ($(this).prop('checked' , true));
    console.log(this.value);                
            });
        });
                
    </script>

in console:-

(index):269 Checkbox_1
(index):272 Checkbox_1
(index):269 Checkbox_2
(index):272 Checkbox_2

CodePudding user response：

When debugging js/jquery, always use rendered code - you'll see that you have something like:

if ($(this).val() == "123,456")

At no point, does either of your checkboxes have the value of "123,456"

So the if never works if you have both ticked as it's comparing a single value with a combined string. You could compare by using split and checking with includes:

if ("123,456".split(",").includes($(this).val())

So your code would be:

if ("<c:out value = '${product.p_act}' />".split(",").includes($(this).val())

Or you could pass them to the js as an array instead of multiple join/split.