使用 jquery 根据数据库值设置复选框的值？

Question

我有一个表单，其中有两个复选框（复选框 1 和复选框 2）。

现在，我想要的是：

1.) 如果在添加详细信息时仅选中复选框 1，则在编辑模式下应仅选中复选框 1。 （正在发生）

2.) 如果在添加详细信息时仅选中复选框 2，则在编辑模式下应仅选中复选框 2。 （正在发生）

3.) 如果在添加详细信息时同时选中了这两个复选框，则在编辑模式下应选中两个复选框。 （没有发生）

如果有人能指出我正确的方向或指出我的错误，那就太好了。

我已经在这里检查了很多解决方案，但其中 none 对我有用，或者你可以指出我可能错过的 link。

我将添加我的 jquery 函数以及我如何以逗号分隔的方式将它们存储在数据库中。

复选框：-


<div class = "error_placement_checkbox">
<div align = "center" class="ui inverted form" id = "idcheckbox">
    <div align = "center" class=" inline required fields">
        <label> Checkboxes </label>
            <div class="field">
                <div class="ui checkbox">
                    <input type = "checkbox" name = "p_act1" value = "Checkbox_1" >
                    <label> Checkbox 1 </label>
                </div>
            </div>
            <div class="field">
                <div class="ui checkbox">
                    <input type = "checkbox" name = "p_act2" value = "Checkbox_2" >
                        <label> Checkbox 2 </label>
                </div>
            </div>
    </div>
</div>
</div>

我的jquery函数：-


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

在我的控制器 Servlet 中：- // 以逗号分隔存储它们。


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

编辑：-

这是我的全部 jquery 功能


<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

Answer 1

调试时 js/jquery，总是使用渲染代码 - 你会看到你有类似的东西：

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

在任何情况下，您的复选框中的任何一个都没有 "123,456"

的值

因此，如果您同时勾选了 if，那么 if 永远不会起作用，因为它是将单个值与组合字符串进行比较。您可以使用 split 进行比较并使用 includes:

检查

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

因此您的代码将是：

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

或者您可以将它们作为数组而不是多个 join/split.

传递给 js

使用 jquery 根据数据库值设置复选框的值？

Setting values of checkboxes based on database values using jquery?

html

javascript

checkbox

jquery