web-dev-qa-db-ja.com

JavaScriptを使用してチェックボックスのステータスを取得する

これは私のチェックボックスの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にクラスを追加します。この問題の解決を手伝ってください。ありがとう

javascriptcheckboxusingstatus
9
Sasindu H

className変数（純粋なJS）にアクセスする必要があります。以下では、divに_terms_div_のIDがあり、_terms_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;
  }
}
_
15
Rudu

ライブデモ（テストするには、「Terms Div」テキストをクリックしてください）

JQueryでタグ付けされた質問は表示されませんでしたが、jQeryセレクターが使用されていることに気付きました。

純粋な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;
    }
}
1
Loktar

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
1
karim79

チェックボックスタグにonclick="validateTerms();"を追加してみてください

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