javascript - keywords - Asegurarse de que al menos una casilla esté marcada

tags html5

Question

Tengo un formulario con múltiples casillas de verificación y quiero usar JavaScript para asegurarme de que al menos una esté marcada. Esto es lo que tengo ahora, pero no importa lo que se elija, aparece una alerta.

JS (mal)

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

Entonces, lo que terminé haciendo en JS fue esto:

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

}

Decidí dejar la parte de "Gracias" para encajar con el resto de la tarea. Muchas gracias, todos los consejos realmente ayudaron.

Answer 1

Con jQuery, a continuación puede evitar que el usuario deseleccione la última casilla marcada.

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

Answer 2

Debe evitar tener dos casillas de verificación con el mismo nombre si planea hacer referencia a ellas como document.FC.c1 . Si tiene varias casillas de verificación llamadas c1 ¿cómo sabrá el navegador a qué se refiere?

Aquí hay una solución no jQuery para verificar si las casillas de verificación en la página están marcadas.

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

Necesita la pieza Array.prototype.slice.call para convertir la NodeList devuelta por document.querySelectorAll en una matriz a la que puede llamar.

Answer 3

Esto debería funcionar:

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 tiene alguna pregunta sobre el código, solo comente.

^{Uso l=checkboxs.length para mejorar el rendimiento. Consulte http://www.erichynds.com/javascript/javascript-loop-performance-caching-the-length-property-of-an-array/}

Answer 4

Puede verificar que al menos una casilla de verificación esté marcada o no usando este código simple. También puedes soltar tu mensaje.

Link referencia

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

Answer 5

Mira esto.

No puede acceder a las entradas de formulario a través de su nombre. Utilice los métodos document.getElements lugar.

Answer 6

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

Explicación:
Una vez que se haya intentado enviar un formulario, esto actualizará la etiqueta de la sección de su casilla de verificación para notificar al usuario que marque una casilla de verificación si aún no lo ha hecho. Si no se marca ninguna casilla de verificación, se muestra una etiqueta oculta de ''error'' que le pide al usuario ''¡Marque una casilla de verificación!''. Si el usuario marca al menos una casilla de verificación, la etiqueta roja se oculta instantáneamente nuevamente, revelando la etiqueta original. Si el usuario vuelve a desmarcar todas las casillas de verificación, la etiqueta roja regresa en tiempo real. Esto es posible gracias al evento onchange de JavaScript (escrito como .addEventListener(''change'', function(){});

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