S'assurant au moins une case est cochée

cela devrait fonctionner:

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

si vous avez une question à propos du code, n'hésitez pas à nous en faire part.

^{j'utilise l=checkboxs.length pour améliorer la performance. Voir http://www.erichynds.com/javascript/javascript-loop-performance-caching-the-length-property-of-an-array/}

vérifiez ceci.

vous ne pouvez pas accéder aux entrées du formulaire via leur nom. Utilisez plutôt la méthode document.getElements .

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

explication:

Une fois qu'un formulaire soumettre a été tenté, cela mettra à jour l'étiquette de votre section de case à cocher pour aviser l'utilisateur de cocher une case s'il ne l'a pas encore fait. Si aucune des cases sont cochées, caché 'erreur' étiquette est révélé invitant l'utilisateur à " Veuillez cocher une case!'. Si l'utilisateur coche au moins une case, le rouge l'étiquette est à nouveau instantanément cachée, révélant l'étiquette originale. Si l'utilisateur décoche à nouveau toutes les cases à cocher, l'étiquette rouge revient en temps réel. Ceci est rendu possible par L'événement onchange de JavaScript (écrit comme .addEventListener('change', function(){});

en utilisant jQuery, ci-dessous vous pouvez juste empêcher l'utilisateur de désélectionner dernière case à cocher cochée.

$('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
    $('#cont').html(getArrVal.toString());
   
  } else {
    $(this).prop("checked",true);
    $('#cont').html("At least one value must be checked!");
    return false;
    
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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="cont"></div>

vous pouvez vérifier qu'au moins une case à cocher est cochée ou non en utilisant ce code simple. Vous pouvez également laisser tomber votre message.

Référence Link

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

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