jquery - jQuery检查是否已选中css自定义复选框

Question

我必须使用以下 css 构建一个自定义复选框：

  input[type="checkbox"] {
      display:none;
  }
  input[type="checkbox"] + label span {
      display:inline-block;
      width:19px;
      height:19px;
      margin:-1px 4px 0 0;
      vertical-align:middle;
      background:url("../image/checkbox.png") 0 -20px no-repeat;
      cursor:pointer;
  }
  input[type="checkbox"]:checked + label span {
      background:url("../image/checkbox.png") 0 -1px no-repeat;
  }

但是现在我在使用以下功能检查复选框是否被选中时遇到问题：

var radio_check = $('#one input[type="checkbox"]');

    function add_color(element, color){
        element.css('background-color', color);
    }

    function checkEmailFormat(){
        if(emailReg.test(emailaddressVal)) {
            add_color(email, red);
        }
        else {
            return true;
        }
    }

    function check_Radio_Checkb(){
        if(!radio_check.is(':checked')){
            alert('no');
        }
        else{
            alert('yes');
            // return true;
        }
    }

    function validate_form(){

        $('form input:not(.email input), textarea').each(function(){
            if ($(this).val() == '') {
                add_color($(this), red);
            }
            else {
                add_color($(this), white);
            }

        });

        return (checkEmailFormat() && true);

    }


                            <div class="checkbox_wrapper">

                                <input type="checkbox" id="one" />
                                <label for="one">
                                    <span></span>
                                    I agree with the terms and conditions and privacy policy
                                </label>
                                <input type="checkbox" id="two" />
                                <label for="two">
                                    <span></span>
                                    Join the Krušovice VIPs for the latest news, competitions and promotions. 
                                </label>

                            </div>

Answer 1

您的选择器错误，应该是：

var radio_check = $('#one');

目前，您正在尝试选择#one具有input[type="checkbox"]

Answer 2

嘿试试这个 JS 代码而不是你的。它会给你预期的结果。

$('input[type="checkbox"]').change(function(){
check_Radio_Checkb($(this));

});
function add_color(element, color){
    element.css('background-color', color);
}

function checkEmailFormat(){
    if(emailReg.test(emailaddressVal)) {
        add_color(email, red);
    }
    else {
        return true;
    }
}

function check_Radio_Checkb(rdb_new){
    if(!rdb_new.is(':checked')){
        alert('no');
    }
    else{
        alert('yes');
        // return true;
    }
}

function validate_form(){

    $('form input:not(.email input), textarea').each(function(){
        if ($(this).val() == '') {
            add_color($(this), red);
        }
        else {
            add_color($(this), white);
        }

    });

    return (checkEmailFormat() && true);

}

希望它会奏效。