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

Question

我需要对我为朋友的 WordPress 网站制作的表单进行动态表单验证。我使用了一个表单插件，这样他们将来使用起来会更容易。

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

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

jsFiddle 如果下面的代码太乱 -> 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');
    }
});

检查小提琴