ContactForm7 - 检查是否选中了复选框

时间:2014-07-02 09:53:53

标签: jquery wordpress checkbox

我坚持如何检查是否使用jQuery选中了复选框。基本上,如果选中复选框,那么我需要它来运行一个函数。

在WordPress帖子中,我只需要使用使用此id的短代码:

 [contact-form-7 id="78" title="BusinessForm"]

然而,它将其作为HTML输出:

<span class="wpcf7-form-control-wrap sameAddress">
    <span class="wpcf7-form-control wpcf7-checkbox sameAddress" id="sameAddress">
        <span class="wpcf7-list-item first last">
            <input type="checkbox" name="sameAddress[]" value="Yes">
                <span class="wpcf7-list-item-label">Yes</span>
        </span>
    </span>
 </span>

这是我正在使用的jQuery:

$(input[value='sameAddress[]']).change(function() {

    var alreadyChecked = $(this).hasClass('alreadyChecked');

    if (alreadyChecked) {
        alert('This does not have the class');  
        $(this).addClass('alreadyChecked');
    } else {
        alert('This has the class, yay!!!!! ');
    }

});

有人可以帮我改进这一点,并在选中复选框后让它运行功能/警报吗?提前致谢。

编辑:这是一个小提琴:http://jsfiddle.net/uk3E3/

3 个答案:

答案 0 :(得分:3)

绑定事件的方式是错误的,使用像这样的属性选择器,

$("input[name = 'sameAddress[]']").change(function () {
    if (this.checked) {
        alert("checked");
    }
});

Fiddle

在您的代码中,没有值为sameAddress[]的复选框。所以它不会将更改事件绑定到任何复选框。

如果选中该复选框,

this.checked将返回true。

答案 1 :(得分:0)

请参阅下面的Jquery功能,它将帮助您找到解决方案

$('input[type="checkbox"]').change(function(){
    if($(this).is(':checked')) {
    alert("test");
    }
});

答案 2 :(得分:0)

我正在搜索半天我如何使用隐藏div的contactform7 - 但不是选择元素而是 - 带复选框... - 并且复选框在检查时不会被修改,只需单击即可。复选框值未被修改...我发现此解决方案正常工作(感谢所有stackoverflow用户)

$(document).ready(function() {

    //Hide the field initially
    $("#hide1").hide(); 

    //Show the text field only when the third option is chosen - this doesn't
    $("input[name = 'programs-select1[]']").change(function () {
    if (this.checked)  {
                    $("#hide1").show();
            }
            else {
                    $("#hide1").hide();
            }
    });

});

联系表格7如下:

[checkbox programs-select1 id:programs-select1 use_label_element "Week 1"]
<div id="hide1" class="hide">
[select* fullhalfboard-select1 id:fullhalfboard-select1 use_label_element "element1" "element2" "element3"]
</div>