xxxxxxxxxx
<label><input type="checkbox" id="cbox1" value="first_checkbox"> Este es mi primer checkbox</label><br>
<input type="checkbox" id="cbox2" value="second_checkbox"> <label for="cbox2">Este es mi segundo checkbox</label>
xxxxxxxxxx
<!DOCTYPE html>
<html>
<head>
<style>
.main {
display: block;
position: relative;
padding-left: 45px;
margin-bottom: 15px;
cursor: pointer;
font-size: 20px;
}
/* Hide the default checkbox */
input[type=checkbox] {
visibility: hidden;
}
/* Creating a custom checkbox
based on demand */
.geekmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: black;
}
/* Specify the background color to be
shown when hovering over checkbox */
.main:hover input ~ .geekmark {
background-color: yellow;
}
/* Specify the background color to be
shown when checkbox is active */
.main input:active ~ .geekmark {
background-color: red;
}
/* Specify the background color to be
shown when checkbox is checked */
.main input:checked ~ .geekmark {
background-color: green;
}
/* Checkmark to be shown in checkbox */
/* It is not be shown when not checked */
.geekmark:after {
content: "";
position: absolute;
display: none;
}
/* Display checkmark when checked */
.main input:checked ~ .geekmark:after {
display: block;
}
/* Styling the checkmark using webkit */
/* Rotated the rectangle by 45 degree and
showing only two border to make it look
like a tickmark */
.main .geekmark:after {
left: 8px;
bottom: 5px;
width: 6px;
height: 12px;
border: solid white;
border-width: 0 4px 4px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
</style>
</head>
<body>
<h1 style="color:green;">
Best Computer Science Platform
</h1>
<label class="main">CodeX
<input type="checkbox">
<span class="geekmark"></span>
</label>
<label class="main">GeeksforGeeks
<input type="checkbox" checked="checked">
<span class="geekmark"></span>
</label>
<label class="main">CodeY
<input type="checkbox">
<span class="geekmark"></span>
</label>
</body>
</html>
xxxxxxxxxx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Finds all input elements that are unchecked.</title>
<link rel="stylesheet" href="https://jqueryvalidation.org/files/demo/site-demos.css">
<style>
div { color:red; }
</style>
</head>
<body>
<form id="myform">
<form>
<input type="checkbox" name="newsletter" checked="checked" value="Hourly" />
<input type="checkbox" name="newsletter" value="Daily" />
<input type="checkbox" name="newsletter" value="Weekly" />
<input type="checkbox" name="newsletter" checked="checked" value="Monthly" />
<input type="checkbox" name="newsletter" value="Yearly" />
</form>
<div></div>
</form>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<script>
// just for the demos, avoids form submit
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
function countUnchecked() {
var n = $( "input:unchecked" ).length;
$( "div" ).text(n + (n == 1 ? " is" : " are") + " unchecked!" );
}
countUnchecked();
$( ":checkbox" ).click( countUnchecked );
</script>
</body>
</html>
xxxxxxxxxx
<form method="post">
<input asp-for="chkPref" />
@Html.CheckBoxFor(model => model.chkPref2)
<button>Click</button>
</form>
xxxxxxxxxx
@model SampleCode.Models.CheckboxList@{
ViewData["Title"] = "ASP.NET CORE MVC checkbox model binding";}
<div class="text-center">
@for (int i = 0; i < Model.Checkboxs.Count(); i++)
{
@Html.CheckBoxFor(m => m.Checkboxs[i].Selected, new { @class = "" })
@Html.DisplayFor(m => m.Checkboxs[i].Text)
@Html.HiddenFor(m => m.Checkboxs[1].Value)
}
</div>