联系表格 7 - 我如何捕捉和自定义每个复选框？答案

【问题标题】：Contact form 7 - how can i catch and customize each checkbox?联系表格 7 - 我如何捕捉和自定义每个复选框？
【发布时间】：2016-06-29 12:24:08
【问题描述】：

如何捕捉和自定义 Contact form 7 插件中的每个复选框？

我在单个字段中有一个复选框列表。

我想要做的是使用 jQuery 为每个复选框添加一个属性和值。

像这样：

$("input['type=checkbox']:nth-child(3)").attr("data-price", 500).addClass("cf7-checkbox");

这是我的 html 代码：

<span class="wpcf7-form-control-wrap list-tosafot1">
    <span class="wpcf7-form-control wpcf7-checkbox" id="options1st">
        <span class="wpcf7-list-item first">
            <input type="checkbox" name="list-tosafot1[]" value="price-100" />&nbsp;
            <span class="wpcf7-list-item-label">Checkbox1 - price 100</span>
        </span>
        <span class="wpcf7-list-item">
            <input type="checkbox" name="list-tosafot1[]" value="price-200" />&nbsp;
            <span class="wpcf7-list-item-label">Checkbox2 - price 200</span>
        </span>
        <span class="wpcf7-list-item">
            <input type="checkbox" name="list-tosafot1[]" value="price-300" />&nbsp;
            <span class="wpcf7-list-item-label">Checkbox3 - price 300</span>
        </span>
        <span class="wpcf7-list-item">
            <input type="checkbox" name="list-tosafot1[]" value="price-400" />&nbsp;
            <span class="wpcf7-list-item-label">Checkbox4 - price 400</span>
        </span>
        <span class="wpcf7-list-item last">
            <input type="checkbox" name="list-tosafot1[]" value="price-500" />&nbsp;
        <span class="wpcf7-list-item-label">Checkbox5 - price 500</span>
        </span>
    </span>
</span>

非常感谢！！！

【问题讨论】：

复选框有id吗？
请添加更多信息，您是否遇到任何错误，它无法正常工作。还要添加一段代码，以便我们检查发生了什么。谢谢。
我认为您尝试在 jQuery 中选择复选框的方式是错误的。

标签： jquery wordpress checkbox contact-form-7

【解决方案1】：

您尝试选择复选框的方式可能是错误的，这是一种遍历所有复选框的方法：

var type = null;
$("input").each(function()
{
  type = $(this).attr("type");
  if(type == "checkbox")
  {
    $(this).attr("data-price", 500);
    $(this).addClass("cf7-checkbox");
  }
});

【讨论】：

谢谢！但我每个复选框都有许多不同的值。大约 10 个复选框。
是否有相同值的复选框？
所以你只需要改变某些？

【解决方案2】：

这个选择器不应该工作，因为输入元素不共享同一个父元素。

$("input['type=checkbox']:nth-child(3)").attr("data-price", 500).addClass("cf7-checkbox");

所以我找到了这个解决方案：

$('.wpcf7-checkbox .wpcf7-list-item:nth-child(3) input').attr("data-price", 500).addClass("cf7-checkbox");

【讨论】：