Überprüfen von Kontrollkästchen in HTML

Question

Ich habe ein Formular gibt es 4 Optionen (sie können Kontrollkästchen oder Radio sein).

Ich möchte mehrere Optionen auswählen, aber eine ist obligatorisch.

Ich weiß, dass es in JS/jQuery möglich ist, aber ich möchte eine HTML/CSS-Basislösung.

Answer 1

Um mehrere Eingaben prüfen zu können, müssen diese Kontrollkästchen sein. (Sie konnte Radio-Buttons mit verschiedenen Namen, aber man würde sie nicht in der Lage sein, deaktivieren einmal überprüft.)

So Ankreuzfelder und zeigen die Schaltfläche Senden nur dann, wenn jede geprüft werden, unter Verwendung der general sibling selector (~):

input[type="Submit"] { 
 
    display: none; 
 
} 
 

 
input:checked ~ input[type="Submit"] { 
 
    display: inline; 
 
}

<input id="c1" type="checkbox"><label for="c1">First</label><br> 
 
<input id="c2" type="checkbox"><label for="c2">Second</label><br> 
 
<input id="c3" type="checkbox"><label for="c3">Third</label><br> 
 
<input id="c4" type="checkbox"><label for="c4">Fourth</label><br> 
 
<input type="Submit">

---

Wenn Sie das Aussehen eines behinderten Submit-Button möchten, eine zweite Schaltfläche hinzufügen, die deaktiviert ist.

Wenn keine Eingabe angeklickt wird, zeigen Sie nur die deaktivierte Schaltfläche zum Senden an. Wenn ein oder mehrere Eingänge angeklickt werden, zeigen die einreichen aktiviert Taste nur:

input[type="Submit"]:not([disabled]) { 
 
    display: none; 
 
} 
 

 
input:checked ~ input[type="Submit"]:not([disabled]) { 
 
    display: inline; 
 
} 
 

 
input:checked ~ input[disabled] { 
 
    display: none; 
 
}

<input id="c1" type="checkbox"><label for="c1">First</label><br> 
 
<input id="c2" type="checkbox"><label for="c2">Second</label><br> 
 
<input id="c3" type="checkbox"><label for="c3">Third</label><br> 
 
<input id="c4" type="checkbox"><label for="c4">Fourth</label><br> 
 

 
<input type="Submit" disabled> 
 
<input type="Submit">

Answer 2

Sie können Folgendes verwenden, für das eine Pflicht gilt.

<input type="radio" name="name" required> 

Welches ohne erforderliche nicht getestet werden, wenn sie aktiviert ist oder nicht.

Answer 3

Sie können dies in html5 tun mit dem required Attribute Wie

<input type="checkbox" required name="your_checkbox_name"> 

Dies teilt den Browser, der die Form nicht auf ohne die Checkbox checked.Although i java-script werden, da nicht alle Browser empfehlen sind eingereicht werden in der Lage sein, dies zu erkennen.

Oder

Wenn Sie, wenn mindestens ein Kontrollkästchen aktiviert erfassen möchten, wird als von @RickHitchcock in den Kommentare vorgeschlagen, könnten Sie verwenden

span { 
 
    display: inline; 
 
    color: red; 
 
} 
 
input[type="Submit"], 
 
input:checked ~ span { 
 
    display: none; 
 
} 
 
input:checked ~ input[type="Submit"] { 
 
    display: inline; 
 
}

<form action="#" method="post"> 
 
    <input type="checkbox" />Checkbox 1 
 
    <br /> 
 
    <input type="checkbox" />Checkbox 1 
 
    <br /> 
 
    <input type="checkbox" />Checkbox 1 
 
    <br /> 
 
    <input type="submit" value="Submit" /><span>! Please check at least one checkbox</span> 
 

 
</form>

Answer 4

Im Anschluss an die Antwort von @Rick Hitchcock, denke ich, dass Sie die Taste, um den Benutzer zeigen wollen Übermitteln, aber es wird deaktiviert, bis eines der Kontrollkästchen aktiviert ist.

Wenn ja, können Sie pointer-events verwenden (in allen modernen Browsern: http://caniuse.com/#feat=pointer-events) wie folgt aus:

input[type="Submit"] { 
 
    opacity:0.5; 
 
    pointer-events:none; 
 
    /* animation added for fancy ;) */ 
 
    transition:all .2s ease; 
 
} 
 

 
input:checked ~ .button-wrapper input[type="Submit"] { 
 
    opacity:1; 
 
    pointer-events:all; 
 
} 
 

 
.button-wrapper { 
 
    position:relative; 
 
    display:inline-block; 
 
} 
 

 
.button-wrapper:before { 
 
    content:""; 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
    width:100%; 
 
    height:100%; 
 
    z-index:1; 
 
} 
 

 
input:checked ~ .button-wrapper:before { 
 
    display:none; 
 
}

<input id="c1" type="checkbox"><label for="c1">First</label><br> 
 
<input id="c2" type="checkbox"><label for="c2">Second</label><br> 
 
<input id="c3" type="checkbox"><label for="c3">Third</label><br> 
 
<input id="c4" type="checkbox"><label for="c4">Fourth</label><br> 
 
<div class="button-wrapper"> 
 
    <input type="Submit" tabindex="-1"> 
 
</div>

bearbeiten Ich war in .button-wrapper:before eine "Maske" hinzugefügt, so wird es arbeite in den alten Browsern.

Answer 5

Try This:

<input id="c3" type="checkbox" required><label for="c3">Third</label><br> 
<input id="c4" type="checkbox" required><label for="c4">Fourth</label><br> 

Oder Sie können versuchen, diese jquery mit einem HTML-Checkbox zu überprüfen:

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Makes "field" always required. Nothing and blanks are invalid. </title> 
<link rel="stylesheet" href="http://jqueryvalidation.org/files/demo/site-demos.css"> 

</head> 
<body> 
<form id="myform"> 
<label for="field">Required: </label> 
<input type="text" class="left" id="field" name="field"> 
<br/> 
<input type="submit" value="Validate!"> 
</form> 
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
<script src="http://jqueryvalidation.org/files/dist/jquery.validate.min.js">  </script> 
<script src="http://jqueryvalidation.org/files/dist/additional- methods.min.js"></script> 
<script> 
// just for the demos, avoids form submit 
jQuery.validator.setDefaults({ 
    debug: true, 
    success: "valid" 
}); 
$("#myform").validate({ 
    rules: { 
field: { 
    required: true 
} 
    } 
}); 
</script> 
</body> 
</html> 

required ist der Weg html validiert Dinge