在特定页面上将复选框值设置为 true

Question

我已经使用联系表 7 在每个产品页面上创建了一个产品查询表。表格包含每个产品的复选框，以帮助查询。如果用户在相应的产品页面上，如何自动将特定产品复选框设置为 true/on？

我在获取页面标题的表单中添加了一个动态隐藏字段。

联系表格&在每个复选框的名称字段中生成一个复选框数组name="products[]"

理想情况下，我希望脚本循环并选择与隐藏字段匹配的复选框，有人可以告诉我该怎么做吗？

下面是我当前的 jquery

        $( document ).ready(function() {
            var get_product_name = $('#product-name').val(); // hidden field value
            if(get_product_name == 'product-page-title')
            {
              $('CHECKBOX_HERE').prop('checked', true);
            }
        });

联系表格 7 生成的 HTML...

<span class="wpcf7-form-control-wrap page-title">
<input type="hidden" name="page-title" value="Product template" size="40" class="wpcf7-form-control wpcf7dtx-dynamictext wpcf7-dynamichidden" aria-invalid="false">
</span>

<span class="wpcf7-form-control-wrap products">
    <span class="wpcf7-form-control wpcf7-checkbox">
    
    <span class="wpcf7-list-item first"><label><input type="checkbox" name="products[]" value="Product One"><span class="wpcf7-list-item-label">Product One</span></label>
    </span> 
    <span class="wpcf7-list-item"><label><input type="checkbox" name="products[]" value="Product Two"><span class="wpcf7-list-item-label">Product Two</span></label>
    </span> 
    <span class="wpcf7-list-item"><label><input type="checkbox" name="products[]" value="Product Three"><span class="wpcf7-list-item-label">Product Three</span></label>
    </span> 
    <span class="wpcf7-list-item"><label><input type="checkbox" name="products[]" value="Product Four"><span class="wpcf7-list-item-label">Product Four</span></label>
    </span> 
    <span class="wpcf7-list-item last"><label><input type="checkbox" name="products[]" value="Product Five"><span class="wpcf7-list-item-label">Product Five</span></label>
    </span>

    </span>
</span>

如你所见，我的技能有限

Answer 1

选择器不正确，您正在尝试选择具有 id 'product-name' 的输入元素，因此您正在搜索的输入如下所示：

<input id="product-name">

但是你的 HTML 中没有这个，所以你应该为这个元素创建一个选择器，这是你正在寻找的元素：

<input type="hidden" name="page-title" value="Product template" size="40" class="wpcf7-form-control wpcf7dtx-dynamictext wpcf7-dynamichidden" aria-invalid="false">

所以选项 1，是更改选择器 $('#product-name').val();对于这个选择器：

$('input[type="hidden"]').val();

但这太笼统了，这样做可能会选择超过 1 种隐藏的输入类型，如果你想要更具体的东西，你可以使用 html 元素中的现有类来给你一个不同的值：

<input type="hidden" name="page-title" value="Product template" size="40" class="wpcf7-form-control wpcf7dtx-dynamictext wpcf7-dynamichidden" aria-invalid="false">

然后像这样调用选择器：

$('.wpcf7-dynamichidden').val()

同样，这也是非常通用的，它可以选择页面中具有类 wpcf7-dynamichidden 的所有字段，因此最好的方法是您可以将 HTML 更改为具有特定 id或特定名称或特定类，您可以稍后将选择器 $('#product-name').val() 更改为如下内容：

$('input[type="hidden"]').val(); //No need to change anything in the HTML, too generic though
$('.wpcf7-dynamichidden').val(); //No need to change anything in the HTML, also generic and can select more than one input element
$('#yourIdAddedToTheElement').val(); //Requires adding an id to your HTML element like <input id="yourIdAddedToTheElement" type="hidden"> 

毕竟，如果你只是想试试这段代码，它可以工作：

$(document).ready(function() {
        var get_product_name = $('.wpcf7-dynamichidden').val();
        if(get_product_name == 'product-page-title')
        {
          $('input[type="checkbox"]').prop('checked', true); //Again this will select all checkboxes so you need to speficy in your selector which one to put to true
        }
    });

希望这会有所帮助。

Answer 2

更新！！这行得通！

1. 检查包含页面标题的隐藏字段值

2. 检查复选框值数组

3. 循环检查复选框的值

4. 检查是否有任何复选框值与隐藏字段匹配

5. 将该复选框设置为 true

        $( document ).ready(function() {
            var get_product_name = $('.wpcf7-dynamichidden').val(); // Check hidden field value which contains page title
            //console.log(get_product_name);
            var checkboxValues = $('.wpcf7-list-item label input:checkbox').map(function(){ 
                return $(this).val();
            }).get(); //Checks array of checkbox values
            //console.log(checkboxValues);
   
            $.each(checkboxValues, function(i, val){ // Loop though checkbox values
               if (i = get_product_name) { // Check if any checkbox values match the hidden field
                console.log(i);
                $(".wpcf7-list-item label input:checkbox[value='" + get_product_name + "']").prop('checked', true); // Set that checkbox to true
               }
            });
        });