Убедитесь, что установлен хотя бы один флажок

Ответ 1

Вам следует избегать использования двух флажков с тем же именем, если вы планируете ссылаться на них как 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 для преобразования NodeList, возвращаемого document.querySelectorAll в массив, который вы можете вызвать some.

Ответ 2

Это должно работать:

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

Ответ 3

Проверьте это.

Вы не можете получить доступ к входам форм через их имя. Вместо этого используйте document.getElements.

Ответ 4

Vanilla 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 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);
}

Объяснение:
После попытки отправки формы будет обновлен ярлык раздела флажка, чтобы уведомить пользователя, чтобы установить флажок, если он еще не появился. Если флажок не установлен, появляется скрытая метка "ошибка", предлагающая пользователю "Пожалуйста, установите флажок!". Если пользователь проверяет хотя бы один флажок, красная метка мгновенно скрывается снова, открывая оригинальную метку. Если пользователь снова отменяет все флажки, красная метка возвращается в режиме реального времени. Это стало возможным благодаря событию JavaScript onchange (записанному как .addEventListener('change', function(){});

Ответ 5

Вы можете проверить, что по крайней мере один флажок установлен или нет, используя этот простой код. Вы также можете отказаться от своего сообщения.

Ссылка Ссылка

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

Ответ 6

Запретить пользователю отменять выбор последнего установленного флажка.
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
Plain 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>

Ответ 7

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

Ответ 8

if($("#checkboxid1").is(":checked")) || ($("#checkboxid2").is(":checked"))
            || ($("#checkboxid3").is(":checked"))) {
 //Your Code here
}

Вы можете использовать этот код, чтобы убедиться, что флажок установлен по крайней мере один.

Спасибо!!