Question

我需要动态表单验证我为朋友的WordPress网站制作的表单。我使用了一个表单插件，以便将来使用它们更容易。

我需要根据其他字段的输入有条件地要求某些字段。例如，如果一个人在他们有宠物的复选框中检查“是”，那么我需要一堆其他与宠物相关的字段才能成为必需品并且也可能隐藏自己。我想通过在输入值更改时添加/删除类来实现此目的。

由于插件的原因，网站上的复选框在跨度上非常嵌套，我很难弄清楚如何访问我的复选框的值。

如果以下代码过于混乱，请使用jsFiddle - ＆gt; http://jsfiddle.net/ebgranger/cjsg2/3/

HTML

<p>Do you currently have pets?
        <br /> <span class="wpcf7-form-control-wrap checkbox-243"><span class="wpcf7-form-control wpcf7-checkbox wpcf7-validates-as-required petsCheckBox"><span class="wpcf7-list-item"><input type="checkbox" name="checkbox-243[]" value="Yes" />&nbsp;<span class="wpcf7-list-item-label">Yes</span></span><span class="wpcf7-list-item"><input type="checkbox" name="checkbox-243[]" value="No" />&nbsp;<span class="wpcf7-list-item-label">No</span></span>
        </span>
        </span>
    </p>

的jQuery

$('.checkbox-243 .wpcf7-checkbox .wpcf-list-item input').blur(function () {
if (this:checkbox:checked = "Yes") { 
    $(this).parents('p').addClass('red');
} else if (this:checkbox:checked == "No") {
    $(this).parents('p').removeClass('red');
} 
});

此代码效果不佳。我对我希望如何工作有逻辑，但我需要了解更多有关jQuery语法的知识。

Answer 1

您使用错误的语法来定位复选框。

使用find先获取它。

同时检查属性是否为布尔值..不是字符串

if ( $(this).find('checkbox').is(':checked')) {
    // Add class
} else {
   // remove class
}

<强>更新

$('.checkbox-243 .petsCheckBox input[value="Yes"]').change(function () {
    var $this = $(this);
    if ( $this.is(':checked')) {
        $this.closest('p').addClass('red');
    } else {
        $this.closest('p').removeClass('red');
    }
});

<强> Check Fiddle

选择嵌套在多个跨度中的复选框值

1 个答案: