Suggested Videos
Part 8 - jQuery attribute value selector
Part 9 - jQuery case insensitive attribute selector
Part 10 - jQuery input vs :input
In this video we will discuss the jQuery :checked selector.
The :checked selector selects all checked check-boxes or radio buttons. Let us understand this with an example.
Selects all checked radio button elements
Example : When you click the submit button without selecting any radio button, "No radio button checked" message should be displayed.
When you click the submit button after a radio button is checked, then a message stating "Male is checked" or "Female is checked" should be displayed.
Selects all checked checkbox elements
$('input[type="checkbox"]:checked')
Example : When you click the submit button without checking any checkbox, "No checkbox checked" message should be displayed.
When you click the submit button after checking a checkbox, then a message stating the number of checkboxes checked and their values should be displayed.
Part 8 - jQuery attribute value selector
Part 9 - jQuery case insensitive attribute selector
Part 10 - jQuery input vs :input
In this video we will discuss the jQuery :checked selector.
The :checked selector selects all checked check-boxes or radio buttons. Let us understand this with an example.
Selects all checked radio button elements
$('input[type="radio"]:checked')
Example : When you click the submit button without selecting any radio button, "No radio button checked" message should be displayed.
When you click the submit button after a radio button is checked, then a message stating "Male is checked" or "Female is checked" should be displayed.
<html>
<head>
<title></title>
<script src="jquery-1.11.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#btnSubmit').click(function () {
var result = $('input[type="radio"]:checked');
if (result.length > 0) {
$('#divResult').html(result.val()
+ " is checked");
}
else {
$('#divResult').html("No radio button checked");
}
});
});
</script>
</head>
<body style="font-family:Arial">
Gender :
<input type="radio" name="gender" value="Male">Male
<input type="radio" name="gender" value="Female">Female
<br /><br />
<input id="btnSubmit" type="submit" value="submit" />
<br /><br />
<div id="divResult">
</div>
</body>
</html>
Selects all checked checkbox elements
$('input[type="checkbox"]:checked')
Example : When you click the submit button without checking any checkbox, "No checkbox checked" message should be displayed.
When you click the submit button after checking a checkbox, then a message stating the number of checkboxes checked and their values should be displayed.
<html>
<head>
<title></title>
<script src="jquery-1.11.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#btnSubmit').click(function () {
var result = $('input[type="checkbox"]:checked');
if (result.length > 0) {
var resultString = result.length
+ " checkboxe(s)
checked<br/>";
result.each(function () {
resultString += $(this).val() + "<br/>";
});
$('#divResult').html(resultString);
}
else {
$('#divResult').html("No checkbox checked");
}
});
});
</script>
</head>
<body style="font-family:Arial">
Skills :
<input type="checkbox" name="skills" value="JavaScript" />JavaScript
<input type="checkbox" name="skills" value="jQuery" />jQuery
<input type="checkbox" name="skills" value="C#" />C#
<input type="checkbox" name="skills" value="VB" />VB
<br /><br />
<input id="btnSubmit" type="submit" value="submit" />
<br /><br />
<div id="divResult">
</div>
</body>
</html>
How can we get check box selected value using html helper with razor sytax like(@Html.CheckBoxFor(m => m.salesaccountmanager, new { @class = "chkroles" })) using jquery
ReplyDeleteThis is working on vs 2010 mvc4. But in vs 2015 mvc5 without cheching anyone button click it says one checkbox cheched... val on... is it bug in vs 2015???
ReplyDeleteThanks for providing wonderful jquery tutorial.
ReplyDeleteCan you explain us
difference between .onclick') vs .click() in jquery ?