web-dev-qa-db-fra.com

S'assurer qu'au moins une case est cochée

J'ai un formulaire avec plusieurs cases à cocher et je veux utiliser JavaScript pour m'assurer qu'au moins une est cochée. C’est ce que j’ai en ce moment, mais peu importe ce qui est choisi, une alerte apparaît.

JS (faux)

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

Donc ce que j'ai fini par faire dans JS était ceci:

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

}

J'ai décidé de laisser tomber la partie "Merci" pour s'intégrer au reste de la mission. Merci beaucoup, chaque conseil a vraiment aidé. 

javascripthtmlcheckbox
20
MegaSly

Si vous envisagez de les référencer, par exemple, document.FC.c1, évitez de cocher deux cases du même nom. Si vous avez plusieurs cases à cocher nommées c1, comment le navigateur saura-t-il à quoi vous vous référez?

Voici une solution non-jQuery pour vérifier si les cases à cocher de la page sont cochées.

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

Vous avez besoin de la partie Array.prototype.slice.call pour convertir la NodeList renvoyée par document.querySelectorAll en un tableau sur lequel vous pouvez appeler some.

26
mash

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 sur le code, commentez.

J'utilise l=checkboxs.length pour améliorer les performances. Voir http://www.erichynds.com/javascript/javascript-loop-performance-caching-the-length-property-of-an-array/

20
Mageek

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 a été soumis, cela mettra à jour l'étiquette de votre section de case à cocher pour informer l'utilisateur de cocher une case s'il ne l'a pas encore fait. Si aucune case à cocher n'est cochée, une étiquette «d'erreur» masquée est révélée, invitant l'utilisateur à cocher la case «Veuillez cocher une case!». Si l'utilisateur coche au moins une case à cocher, l'étiquette rouge est à nouveau masquée instantanément, révélant ainsi l'étiquette d'origine. Si l'utilisateur désactive à nouveau toutes les cases à cocher, l'étiquette rouge est renvoyée en temps réel. Ceci est rendu possible par l’événement onchange de JavaScript (écrit en tant que .addEventListener('change', function(){});

2
Kyle Vassella

Vérifie ça.

Vous ne pouvez pas accéder aux entrées de formulaire via leur nom. Utilisez les méthodes document.getElements à la place.

2
Temp

En utilisant jQuery, vous pouvez simplement empêcher l'utilisateur de désélectionner la case à cocher sa dernière case.

$('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>

1
crashtestxxx

Vous pouvez vérifier qu'au moins une case à cocher est cochée ou ne pas utiliser ce code simple. Vous pouvez également déposer votre message.

Référence Lien

<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>
1
Parth Patel
< 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 >
0
saira