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

Question

如何捕捉和自定义 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>

非常感谢！！！

Answer 1

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

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

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

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

Contact form 7 - how can i catch and customize each checkbox?

wordpress

checkbox

jquery

contact-form-7