使用javascript获取复选框状态

时间:2011-06-01 16:57:06

标签: javascript checkbox using status

这是我的复选框HTML代码

<input id="termsCheckbox" name="termsCheckbox" type="checkbox" value="terms" <?PHP echo $terms; ?> class="checkbox">

这是javascript代码

var terms = $("#termsCheckbox");

function validateTerms(){
if(termsCheckbox.checked == false){
terms_div.addClass("terms_error");
return false;
}
else{           
terms_div.removeClass("terms_error");
return true;
}
}

我想检查是否选中了复选框,如果没有,则将一个类添加到terms_div。请帮我解决这个问题。感谢

5 个答案:

答案 0 :(得分:13)

您需要访问className变量(纯JS),以下假定您的div ID为terms_divterms_error是您可能需要的唯一课程在div上,并使用onClick="validateTerms();"

设置复选框
function validateTerms(){
  var c=document.getElementById('termsCheckbox');
  var d=document.getElementById('terms_div');
  if (c.checked) {
    d.className='';
    return true;
  } else { 
    d.className='terms_error';
    return false;
  }
}

答案 1 :(得分:1)

只需将onchange处理程序绑定到您的复选框即可。

$("#termsCheckbox").change(function() {

    // class will be removed if checked="checked"
    // otherwise will be added
    $(this).toggleClass("terms_error", !this.checked);
}).change(); // set initial state

答案 2 :(得分:1)

Live Demo (点击“条款Div”文字进行测试)

我没有看到用jQuery标记的问题,但是我注意到使用了jQery选择器..所以为了安全起见我用纯JS做了它。

纯JS

var terms = document.getElementById("termsCheckbox"),
    terms_div = document.getElementById("terms_div");

function validateTerms(){
    if(terms.checked == false){
        if(terms_div.className.indexOf("terms_error")<0){
            terms_div.className += " terms_error";
        }
        return false;
    }else{      
        terms_div.className = terms_div.className.replace(/\bterms_error\b/,'');
        return true;
    }
}

答案 3 :(得分:0)

尝试在复选框标记

上添加onclick="validateTerms();"

答案 4 :(得分:0)

if(document.form.termsCheckbox.checked==true)
alert('check box is cheked')