0

私はこのサンプルhtmlコーディングを持っています

<form id = "myform" onsubmit = "return checkcheckboxes()">
task 1</task><input type = "checkbox" name = "chk1"></br>
task 2<input type = "checkbox" name = "chk2"></br>
task 3<input type = "checkbox" name = "chk3"></br></br>
<input type = "submit" value = "Go to the next task"></br>
<span id = "message" >congratulations! you have completed all the task completely</span>
</form>

そしてこれがJSです

function checkcheckboxes() {
document.getElementById("message").innerHTML = "";
var valid = true;
var f = document.getElementById("myform");
if (f.chk1.checked == false) {valid = false}
if (f.chk2.checked == false) {valid = false}
if (f.chk3.checked == false) {valid = false}
if (!valid) {document.getElementById("message").innerHTML = "You must check all three boxes to proceed"};
return valid;
}

JSを使用してブラウザでコードを開くと、送信ボタンのある3つのチェックボックスが表示され、送信ボタンの下にスパンテキストがあります

おめでとう！あなたはすべてのタスクを完全に完了しました

2 つ以上のチェックボックスをオンにして [送信] をクリックすると、送信ボタンの下のテキストに次のように表示されます。

続行するには、3 つのボックスすべてにチェックを入れる必要があります

3 つのボックスすべてにチェックを入れると、メッセージは再び次のように変わります。

おめでとう！あなたはすべてのタスクを完全に完了しました

私がやりたいのは、ことわざを削除することです:

おめでとう！あなたはすべてのタスクを完全に完了しました

ボックスがチェックされていなくても表示されるため、すべてのボックスがチェックされ、送信ボタンがクリックされた場合にのみ表示されます。

4

1 に答える 1

1

私がやりたいのは、「おめでとう！すべてのタスクを完全に完了しました」という言葉を削除し、すべてのボックスがチェックされ、送信ボタンがクリックされたときにのみ表示することです

空にする<span>: <span id="message"></span>. そして、フォームを検証するときに JavaScript に入力させます。

テキストにリンクを配置したい場合、javascript 文字列で html アンカー タグを使用する必要がありますか? 例：おめでとうございます！すべてのタスクを完全に完了しました。ここにリンクがあります

その場合、「おめでとう...」テキストにリンクを追加しfalse、フォームが送信されないように常に戻ります。

巨大なチェックリストを作成するため、それぞれの名前を入力する代わりに、ページ上のすべてのチェックボックスを取得するJavaScriptコマンドはありますか

はいあります。最終的なコードは次のとおりです (myformフォーム内のすべてのチェックボックスを確認し、結果のテキストにアンカー タグを追加します)。

function checkcheckboxes() {
    var valid = true;
    var inputs = document.getElementById("myform").getElementsByTagName("input");
    for (var i = 0; i < inputs.length; i++) {
        if (inputs[i].type == "checkbox") {
            if (!inputs[i].checked) {
                valid = false;
                break; // break as soon as it finds an unchecked
            }
        }
    }
    if (!valid) {
        document.getElementById("message").innerHTML = "You must check all boxes to proceed";
    } else {
        document.getElementById("message").innerHTML = "congratulations! you have completed all the tasks completely and <a href='http://www.google.com'>here is the link</a>.";
    }
    return false;
}

実際のデモ コードはこちらでご覧ください。

于 2013-06-02T21:52:35.530 に答える