30

複数のチェックボックスがあるフォームがあり、JavaScriptを使用して少なくとも1つがチェックされていることを確認したいと思います。これは私が今持っているものですが、何を選択してもアラートがポップアップします。

JS（間違っている）

function valthis(){
 if (document.FC.c1.checked) {
   alert ("thank you for checking a checkbox")
  } else  {
   alert ("please check a checkbox")
  }
}

HTML

<p>Please select at least one Checkbox</p>
<br>
<br>
<form name = "FC">
<input type = "checkbox" name = "c1" value = "c1"/> C1 
<br>
<input type = "checkbox" name = "c1" value = "c2"/> C2
<br>
<input type = "checkbox" name = "c1" value = "c3"/> C3
<br> 
<input type = "checkbox" name = "c1" value = "c4"/> C4 
<br>
</form>
<br>
<br>

<input type = "button" value = "Edit and Report" onClick = "valthisform();">

だから私がJSでやったのはこれでした：

function valthisform(){
 var chkd = document.FC.c1.checked || document.FC.c2.checked||document.FC.c3.checked|| document.FC.c4.checked

 if (chkd == true){

 } else {
    alert ("please check a checkbox")
 }

}

残りの課題に合わせるために、「ありがとう」の部分を削除することにしました。どうもありがとうございました、みんなのアドバイスは本当に役に立ちました。

4

9 に答える 9

38

のように参照する場合は、同じ名前のチェックボックスを2つ使用しないでくださいdocument.FC.c1。名前の付いた複数のチェックボックスがc1ある場合、ブラウザはどのように参照しているのかを認識しますか？

ページ上のチェックボックスがオンになっているかどうかを確認するためのjQuery以外のソリューションを次に示します。

var checkboxes = document.querySelectorAll('input[type="checkbox"]');
var checkedOne = Array.prototype.slice.call(checkboxes).some(x => x.checked);

返されたを呼び出し可能な配列Array.prototype.slice.callに変換する部分が必要です。NodeListdocument.querySelectorAllsome

于 2012-08-03T00:40:53.940 に答える
24

これは機能するはずです：

function valthisform()
{
    var checkboxs=document.getElementsByName("c1");
    var okay=false;
    for(var i=0,l=checkboxs.length;i<l;i++)
    {
        if(checkboxs[i].checked)
        {
            okay=true;
            break;
        }
    }
    if(okay)alert("Thank you for checking a checkbox");
    else alert("Please check a checkbox");
}

コードについて質問がある場合は、コメントしてください。

l=checkboxs.lengthパフォーマンスを向上させるために使用します。http://www.erichynds.com/javascript/javascript-loop-performance-caching-the-length-property-of-an-array/を参照してください

于 2012-08-03T00:48:47.503 に答える
6

私はもっ​​と機能的なアプローチを選びます。ES6以降、問題を解決するための優れたツールが提供されているので、それらを使用してみませんか。チェックボックスにクラスを与えることから始めましょう。そうすれば、チェックボックスを非常にうまく切り上げることができます。input [type = "checkbox"]の代わりにクラスを使用することを好みます。これは、ソリューションがより一般的であり、ドキュメントにチェックボックスのグループが多い場合にも使用できるためです。

HTML

    <input type="checkbox" class="checkbox" value=ck1 /> ck1<br />
    <input type="checkbox" class="checkbox" value=ck2 /> ck2<br />

JavaScript

function atLeastOneCheckboxIsChecked(){
    const checkboxes = Array.from(document.querySelectorAll(".checkbox"));
    return checkboxes.reduce((acc, curr) => acc || curr.checked, false);
}

呼び出されると、チェックボックスがチェックされていない場合は関数がfalseを返し、チェックボックスがオンになっている場合はtrueを返します。

これは次のように機能します。reducer関数には、アキュムレータ（acc）と現在の値（curr）の2つの引数があります。アキュムレータまたは現在の値のいずれかがtrueの場合、配列全体の反復ごとに、レデューサーはtrueを返します。前の反復の戻り値は現在の反復のアキュムレータであるため、これがtrueの場合、最後までtrueのままになります。

于 2020-01-01T21:00:20.497 に答える
2

これをチェックして。

名前を使用してフォーム入力にアクセスすることはできません。document.getElements代わりにメソッドを使用してください。

于 2012-08-03T01:19:33.707 に答える
2

バニラJS：

var checkboxes = document.getElementsByClassName('activityCheckbox'); // puts all your checkboxes in a variable

function activitiesReset() {
    var checkboxesChecked = function () { // if a checkbox is checked, function ends and returns true. If all checkboxes have been iterated through (which means they are all unchecked), returns false.
        for (var i = 0; i < checkboxes.length; i++) {
            if (checkboxes[i].checked) {
                return true;
            }
        }
        return false;
    }
    error[2].style.display = 'none'; // an array item specific to my project - it's a red label which says 'Please check a checkbox!'. Here its display is set to none, so the initial non-error label is visible instead. 
        if (submitCounter > 0 && checkboxesChecked() === false) { // if a form submit has been attempted, and if all checkboxes are unchecked
            error[2].style.display = 'block'; // red error label is now visible.
        }
}

for (var i=0; i<checkboxes.length; i++) {  // whenever a checkbox is checked or unchecked, activitiesReset runs.
    checkboxes[i].addEventListener('change', activitiesReset);
}


説明：
フォームの送信が試行されると、チェックボックスセクションのラベルが更新され、ユーザーがまだチェックボックスをオンにしていない場合はチェックボックスをオンにするように通知されます。チェックボックスがチェックされていない場合、非表示の「エラー」ラベルが表示され、ユーザーに「チェックボックスをチェックしてください！」というプロンプトが表示されます。ユーザーが少なくとも1つのチェックボックスをオンにすると、赤いラベルがすぐに再び非表示になり、元のラベルが表示されます。ユーザーが再度すべてのチェックボックスをオフにすると、赤いラベルがリアルタイムで返されます。これは、JavaScriptのonchangeイベント（次のように記述）によって可能になります。.addEventListener('change', function(){});

于 2017-02-25T06:35:15.350 に答える
1

ユーザーが最後にチェックしたチェックボックスの選択を解除できないようにします。
jQuery（元の回答）。

$('input[type="checkbox"][name="chkBx"]').on('change',function(){
    var getArrVal = $('input[type="checkbox"][name="chkBx"]:checked').map(function(){
        return this.value;
    }).toArray();

    if(getArrVal.length){
        //execute the code
        $('#msg').html(getArrVal.toString());

    } else {
        $(this).prop("checked",true);
        $('#msg').html("At least one value must be checked!");
        return false;

    }
});

更新された回答2019-05-31
プレーンJS

let i,
    el = document.querySelectorAll('input[type="checkbox"][name="chkBx"]'),
    msg = document.getElementById('msg'),
    onChange = function(ev){
        ev.preventDefault();
        let _this = this,
            arrVal = Array.prototype.slice.call(
                document.querySelectorAll('input[type="checkbox"][name="chkBx"]:checked'))
                    .map(function(cur){return cur.value});

        if(arrVal.length){
            msg.innerHTML = JSON.stringify(arrVal);
        } else {
            _this.checked=true;
            msg.innerHTML = "At least one value must be checked!";
        }
    };

for(i=el.length;i--;){el[i].addEventListener('change',onChange,false);}
<label><input type="checkbox" name="chkBx" value="value1" checked> Value1</label>
<label><input type="checkbox" name="chkBx" value="value2"> Value2</label>
<label><input type="checkbox" name="chkBx" value="value3"> Value3</label>
<div id="msg"></div>

于 2015-07-10T21:27:41.933 に答える
0 
< script type = "text/javascript" src = "js/jquery-1.6.4.min.js" >  <  / script >
     < script type = "text/javascript" >

function checkSelectedAtleastOne(clsName) {
    if (selectedValue == "select")
        return false;

    var i = 0;
    $("." + clsName).each(function () {

        if ($(this).is(':checked')) {
            i = 1;
        }

    });

    if (i == 0) {
        alert("Please select atleast one users");
        return false;
    } else if (i == 1) {
        return true;
    }

    return true;

}

$(document).ready(function () {
    $('#chkSearchAll').click(function () {

        var checked = $(this).is(':checked');
        $('.clsChkSearch').each(function () {
            var checkBox = $(this);
            if (checked) {
                checkBox.prop('checked', true);
            } else {
                checkBox.prop('checked', false);
            }
        });

    });

    //for select and deselect 'select all' check box when clicking individual check boxes
    $(".clsChkSearch").click(function () {

        var i = 0;
        $(".clsChkSearch").each(function () {

            if ($(this).is(':checked')) {}
            else {

                i = 1; //unchecked
            }

        });

        if (i == 0) {
            $("#chkSearchAll").attr("checked", true)
        } else if (i == 1) {

            $("#chkSearchAll").attr("checked", false)
        }

    });

});

<  / script >
于 2016-01-10T14:25:22.530 に答える
0

この単純なコードを使用して、少なくとも1つのチェックボックスがオンになっているかどうかを確認できます。メッセージをドロップすることもできます。

参照リンク

<label class="control-label col-sm-4">Check Box 2</label>
    <input type="checkbox" name="checkbox2" id="checkbox2" value=ck1 /> ck1<br />
    <input type="checkbox" name="checkbox2" id="checkbox2" value=ck2 /> ck2<br />

<script>
function checkFormData() {
    if (!$('input[name=checkbox2]:checked').length > 0) {
        document.getElementById("errMessage").innerHTML = "Check Box 2 can not be null";
        return false;
    }
    alert("Success");
    return true;
}
</script>
于 2018-01-20T12:16:44.487 に答える
-1 
if(($("#checkboxid1").is(":checked")) || ($("#checkboxid2").is(":checked"))
            || ($("#checkboxid3").is(":checked"))) {
 //Your Code here
}

このコードを使用して、チェックボックスが少なくとも1つオンになっていることを確認できます。

ありがとう！！

于 2019-06-05T10:40:48.400 に答える