Проверка флажков в HTML

Question

У меня есть форма 4 варианта (они могут быть флажками или радио).

Я хочу выбрать несколько вариантов, но один из них является обязательным.

Я знаю, что это возможно в JS/jQuery, но я хочу базовое решение HTML/CSS.

Answer 1

Чтобы иметь возможность проверять несколько входов, они должны быть флажками. (Они могли быть радио кнопки с разными названиями, но вы не смогли бы снять пометку на них один раз проверил.)

Так используйте флажки, и показать кнопку Отправить, если таковые будут проверены, используя 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">

---

Если вы хотите, появление инвалида кнопку отправки, добавьте вторую кнопку, которая отключена.

Если вход не нажат, отобразите отключенную кнопку отправки. Когда один или несколько входов щелкнул, показывают включена кнопка отправки только:

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

Вы можете использовать следующие, обязательные для заполнения.

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

Какой из них не требуется, не будет проверен, если он отмечен галочкой или нет.

Answer 3

Вы можете сделать это в html5, используя required атрибут Как

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

Это говорит браузеру, что форма не должна быть поданным без чекбокс быть checked.Although я рекомендую java-script, поскольку не все браузеры быть в состоянии признать это.

Или

Если вы хотите, чтобы обнаружить, если по крайней мере, один флажок, как предложено @RickHitchcock в комментарии, Вы можете использовать

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

В дополнение к ответу @Rick Хичкока, я думаю, что вы хотите, чтобы показать пользователю кнопку submit, но он будет отключен, пока не будет проверен один из флажков.

Если да, то вы можете использовать pointer-events (во всех современных браузерах: http://caniuse.com/#feat=pointer-events), как это:

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>

Редактировать Я добавил "маску" в .button-wrapper:before так будет работать в старых браузерах.

Answer 5

Попробуйте:

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

Или вы можете попробовать это с помощью JQuery для проверки HTML флажок:

<!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 это путь HTML проверяет вещи