15

私は通常、PHP を使用しているため、残念ながら基本的な JS の原則を理解していません。これが私が達成したいすべてです。このトピックに関する多くの投稿を見てきましたが、通常、それらは必要以上のものです。

ここに私のフォームがあります：

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

チェックボックスは単純な「同意します」です。送信ボタンを押して、そのチェックボックスが選択されている場合にのみ送信します。

ここに問題があります: 私は単純な不正行為の方法が必要です-メソッドはありません-その形式のインラインコードだけです(長すぎないと仮定しますか?)。これは公開ページではありません。そのタイプの検証をすばやく簡単に行えるものが必要なだけです。チェックされていない場合は、alert(); がスローされます。チェックされている場合は、php を介してポスト経由で送信され、通常どおり続行されます。

4

12 に答える 12

36

あなたが使用することができます：

 if(!this.form.checkbox.checked)
{
    alert('You must agree to the terms first.');
    return 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}"  />
  • falseインライン イベント ハンドラーから戻ると、既定のアクション (この場合はフォームの送信) が実行されなくなります。
  • !ブールのNOT 演算子です。
  • thisイベント ハンドラーがアタッチされている要素であるため、送信ボタンです。
  • .form送信ボタンがあるフォームです。
  • .checkboxそのフォームの「checkbox」という名前のコントロールです。
  • .checkedチェックボックスがチェックされている場合はtrue、チェックボックスがチェックされていない場合はfalseです。
于 2012-06-27T20:59:50.777 に答える
6

今のところ、jquery や php は必要ありません。ここのように「必要な」HTML5入力属性のみを使用してください

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

これにより、チェックボックスがオプトインされる前に送信が検証され、防止されます。ユーザーの Web ブラウザーによって生成されるため、言語に依存しないソリューションです。

于 2015-03-13T08:29:21.230 に答える
4

次のようなことができます。

<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>
于 2012-06-27T20:53:05.497 に答える
3

次のことができます。

<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/

于 2012-06-27T20:57:58.567 に答える
2

チェックボックスの ID が「削除」の場合、送信ボタンの「onclick」イベントのJavaScript 関数は次のようになります。

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>
于 2014-09-25T21:19:35.620 に答える
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");
     }
}

チェックボックスを選択するまでボタンが無効になり、ユーザー エクスペリエンスが向上しました。ただし、サーバー側の検証を引き続き行うようにしてください。

于 2016-07-21T17:03:03.993 に答える
1

チェックボックスの ID が「checkbox」の場合:

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

HTH

于 2012-06-27T20:54:18.970 に答える
-1 
var testCheckbox = document.getElementById("checkbox");  
if (!testCheckbox.checked) {
  alert("Error Message!!");
}
else {
  alert("Success Message!!");
}
于 2018-09-13T10:03:35.857 に答える
-2

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

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

以下のリンクをご確認ください。あなたは私の主張を非常に簡単に理解するでしょう。

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

ありがとう

于 2013-04-25T11:08:26.987 に答える