Suggested Videos
Part 10 - jQuery input vs :input
Part 11 - jQuery checked selector
Part 12 - Select values of checkbox group with jquery
(追記) (追記ここまで)
In this video we will discuss how to get the checked checkbox text along with the value. This is continuation to Part 12, please watch Part 12 from jQuery tutorial before proceeding.
(追記) (追記ここまで)
Here is what we want to do. As we check the checkboxes, we want to display the count of checkboxes checked and their text and values.
jQuery get checkbox checked text
jQuery tutorial for beginners
Part 10 - jQuery input vs :input
Part 11 - jQuery checked selector
Part 12 - Select values of checkbox group with jquery
(追記) (追記ここまで)
In this video we will discuss how to get the checked checkbox text along with the value. This is continuation to Part 12, please watch Part 12 from jQuery tutorial before proceeding.
(追記) (追記ここまで)
Here is what we want to do. As we check the checkboxes, we want to display the count of checkboxes checked and their text and values.
jQuery get checkbox checked text
<html>
<head>
<title></title>
<scriptsrc="jquery-1.11.2.js"></script>
<scripttype="text/javascript">
$(document).ready(function () {
$('input[name="skills"]').click(function () {
getSelectedCheckBoxes('skills');
});
$('input[name="cities"]').click(function () {
getSelectedCheckBoxes('cities');
});
var getSelectedCheckBoxes = function (groupName) {
var result = $('input[name="' + groupName + '"]:checked');
if (result.length > 0) {
var resultString = result.length
+ " checkbox checked<br/>";
result.each(function () {
var selectedValue = $(this).val();
resultString +=
selectedValue + " - "
+ $('label[for="option-'
+ selectedValue + '"]').text() + "<br/>";
});
$('#div' +
groupName).html(resultString);
}
else {
$('#div' + groupName).html("No checkbox checked");
}
};
});
</script>
</head>
<bodystyle="font-family:Arial">
Skills :
<inputtype="checkbox"name="skills"value="js"/>
<labelfor="option-js">JavaScript</label>
<inputtype="checkbox"name="skills"value="jq"/>
<labelfor="option-jq">jQuery</label>
<inputtype="checkbox"name="skills"value="cs"/>
<labelfor="option-cs">C#</label>
<inputtype="checkbox"name="skills"value="vb"/>
<labelfor="option-vb">VB</label>
<br/><br/>
Preferred Cities :
<inputtype="checkbox"name="cities"value="ny"/>
<labelfor="option-ny">New York</label>
<inputtype="checkbox"name="cities"value="nd"/>
<labelfor="option-nd">New Delhi</label>
<inputtype="checkbox"name="cities"value="ln"/>
<labelfor="option-ln">London</label>
<br/><br/>
Selected Skills:<br/>
<divid="divskills"></div>
<br/>
Selected Cities:<br/>
<divid="divcities"></div>
</body>
</html>
jQuery tutorial for beginners
No comments:
Post a Comment
It would be great if you can help share these free resources
[フレーム]