Sicherstellen, dass mindestens ein Kontrollkästchen aktiviert ist

Question

Ich habe ein Formular mit mehreren Kontrollkästchen und ich möchte JavaScript verwenden, um sicherzustellen, mindestens eins ist aktiviert. Dies ist, was ich gerade habe, aber egal, was gewählt wird, erscheint eine Warnung.

JS (falsch)

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

Also, was ich am Ende in JS da oben war:

Ich entschied mich, den "Dankeschön" Teil fallen zu lassen, um in den Rest der Aufgabe zu passen. Vielen Dank, jeder Rat hat wirklich geholfen.

Answer 1

Sie sollten vermeiden, zwei Kontrollkästchen mit dem gleichen Namen zu haben, wenn Sie planen, sie wie document.FC.c1 zu referenzieren. Wenn Sie mehrere Checkboxen mit dem Namen c1 haben, woher weiß der Browser, auf was Sie sich beziehen?

Hier ist eine Nicht-jQuery-Lösung, um zu überprüfen, ob Kontrollkästchen auf der Seite aktiviert sind.

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

Sie müssen den Array.prototype.slice.call Teil von document.querySelectorAll in ein Array die NodeList zurück zu konvertieren, die Sie some anrufen können.

Answer 2

sollte diese Arbeit:

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

Wenn Sie eine Frage über den Code haben, kommentieren Sie einfach.

---

^{Ich benutze l=checkboxs.length um die Leistung zu verbessern. Siehe http://www.erichynds.com/javascript/javascript-loop-performance-caching-the-length-property-of-an-array/}

Answer 3

Check this.

Sie nicht Formulareingaben über ihren Namen zugreifen können. Verwenden Sie stattdessen document.getElements Methoden.

Answer 4

Mit jQuery können Sie verhindern, dass Benutzer das letzte Kontrollkästchen deaktiviert.

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

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

Answer 6

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

Erläuterung:
Sobald ein Formular versucht einreichen wurde, wird dies Ihr Checkbox Abschnitt aktualisieren‘ s Etikett, um den Benutzer zu benachrichtigen, ein Kontrollkästchen zu aktivieren, wenn er/sie es noch nicht getan hat. Wenn keine Kontrollkästchen aktiviert sind, wird ein verstecktes "Fehler" -Label angezeigt, das den Benutzer auffordert, ein Kontrollkästchen zu aktivieren. Wenn der Benutzer mindestens ein Kontrollkästchen aktiviert, wird das rote Etikett sofort wieder ausgeblendet und zeigt das ursprüngliche Etikett an. Wenn der Benutzer alle Kontrollkästchen wieder deaktiviert, wird das rote Label in Echtzeit zurückgegeben. Möglich wird dies durch onchange Veranstaltung JavaScript (geschrieben als .addEventListener('change', function(){});

Answer 7

Sie können überprüfen, dass atleast ein Kontrollkästchen aktiviert ist oder nicht, diese einfache Code. Sie können auch Ihre Nachricht löschen können.

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