簡単なJavaScriptのチェックボックスを検証

Question

は、私は通常、いくつかの基本的なJSの原則を下に持っていないので、悲しいことにPHPで動作します。これは私が達成したいすべてです - 私はこのトピックに関する多くの記事を見ましたが、通常は私が必要とするものを超えています。

<input type="checkbox" name="checkbox" value="check" /> 
<input type="submit" name="email_submit" value="submit" onclick="----??----" /> 

チェックボックスは、単純な "同意" である：

は、ここに私のフォームです。送信ボタンを押して、そのチェックボックスが選択されている場合にのみ送信します。

は、ここでのことだ：私はシンプル、不正行為の方法たい - ノー方法 - そのフォームではいくつかのインラインコード（その過度に長くないと仮定すると？）を。これは公開されたページではありません。このタイプの検証では、すばやく簡単なものが必要です。それがチェックされていなければ、警告を投げます（）;チェックされている場合は、PHPを介して投稿経由で提出し、通常どおりに進みます。

Answer 1

：

if(!this.form.checkbox.checked) 
{ 
    alert('You must agree to the terms first.'); 
    return false; 
} 

（demo page）。インラインイベントハンドラからfalseを返す

<input type="checkbox" name="checkbox" value="check" /> 
<input type="submit" name="email_submit" value="submit" onclick="if(!this.form.checkbox.checked){alert('You must agree to the terms first.');return false}" /> 

• （この場合は、フォームを送信）場所を取ってから、デフォルトのアクションを防ぐことができます。
• !はBoolean NOT operatorです。それは、イベントハンドラが接続されている要素であるため、
• thisは、送信ボタンです。
• .formはインクルードは、ボタンが中にある提出する形式である。
• .checkboxという形で「チェックボックス」という名前のコントロールです。チェックボックスがオフになっている場合は、チェックボックスをチェックし、FALSEの場合
• .checkedはtrueです。

Answer 2

あなたはこのような何か行うことができます。以下見やすく私見ものの

<form action="../" onsubmit="return checkCheckBoxes(this);"> 
    <p><input type="CHECKBOX" name="MyCheckbox" value="This..."> This...</p> 
    <p><input type="SUBMIT" value="Submit!"></p> 
</form> 

<script type="text/javascript" language="JavaScript"> 
<!-- 
function checkCheckBoxes(theForm) { 
    if (
    theForm.MyCheckbox.checked == false) 
    { 
     alert ('You didn\'t choose any of the checkboxes!'); 
     return false; 
    } else {  
     return true; 
    } 
} 
//--> 
</script> 

http://lab.artlung.com/validate-checkbox/

が、これは次のように別々の関数定義せずに行うことができます。

<form action="../" onsubmit="if (this.MyCheckbox.checked == false) { alert ('You didn\'t choose any of the checkboxes!'); return false; } else { return true; }"> 
    <p><input type="CHECKBOX" name="MyCheckbox" value="This..."> This...</p> 
    <p><input type="SUBMIT" value="Submit!"></p> 
</form> 

Answer 3

あなたのチェックボックス場合

if(document.getElementById('checkbox').checked == true){ // code here } 

0123： 'チェックボックス' のIDを持っています

あなたは次の操作を行うことができますHTH

Answer 4

：

<form action="/" onsubmit="if(document.getElementById('agree').checked) { return true; } else { alert('please agree'); return false; }"> 
    <input type="checkbox" name="checkbox" value="check" id="agree" /> 
    <input type="submit" name="email_submit" value="submit" /> 
</form>​ 

ここでは、作業のデモです - http://jsfiddle.net/Ccr2x/あなたが使用することができ

Answer 5

var confirm=document.getElementById("confirm").value; 
     if((confirm.checked==false) 
     { 
     alert("plz check the checkbox field"); 
     document.getElementbyId("confirm").focus(); 
     return false; 
     } 

Answer 6

Guysは、あなたは非常に簡単に検証のこの種を行うことができます。チェックボックスのIDまたは名前を追跡するだけです。静的または動的に行うことができます。

静的には、チェックボックスのハードコードIDを使用できます。動的には、フィールド名を配列として使用してループを作成できます。

以下のリンクをご確認ください。あなたは非常に簡単に私のポイントを得るでしょう。

http://expertsdiscussion.com/checkbox-validation-using-javascript-t29.html

おかげ

Answer 7

チェックボックスのID場合は "の削除" 次のようにJavaScript関数をすることができsubmitボタンの "onclickの" イベントのために、次に：

html: 
<input type="checkbox" name="Delete" value="Delete" id="Delete"></td> 
<input type="button" value="Delete" name="delBtn" id="delBtn" onclick="deleteData()"> 

script: 
<script type="text/Javascript"> 
    function deleteData() { 
     if(!document.getElementById('Delete').checked){ 
      alert('Checkbox not checked'); 
      return false; 
     } 
</script> 

Answer 8

今のところjqueryまたはphp neeはありませんded。これは、検証し、チェックボックスがオプトインされる前に、任意の提出防ぐことができます。言語に依存しないソリューションをそのユーザーのWebブラウザによって生成されるので、ここで

<form> 
     <p> 
      <input class="form-control" type="text" name="email" /> 
      <input type="submit" value="ok" class="btn btn-success" name="submit" /> 
      <input type="hidden" name="action" value="0" /> 
     </p> 
     <p><input type="checkbox" required name="terms">I have read and accept <a href="#">SOMETHING Terms and Conditions</a></p> 
</form> 

のように、単に「必要」HTML5入力attrbuteを使用してください。

Answer 9

もう1つの簡単な方法は、関数を作成し、チェックボックスがチェックされているかどうかをチェックし、jQueryを使用してボタンを無効にすることです。

HTML：

<input type="checkbox" id="myCheckbox" /> 
<input type="submit" id="myButton" /> 

はJavaScript：

var alterDisabledState = function() { 

var isMyCheckboxChecked = $('#myCheckbox').is(':checked'); 

    if (isMyCheckboxChecked) { 
    $('myButton').removeAttr("disabled"); 
    } 
    else { 
      $('myButton').attr("disabled", "disabled"); 
    } 
} 

今、あなたは、彼らは、チェックボックスを選択するまで無効になっているボタンがあり、そして今、あなたはより良いユーザー体験を持っています。私はあなたがまだサーバー側の検証を行うことを確認します。