Somthing is wrong with this code.
I have div box and when click on Coutries title he shows the list of countries. that list contain 5 check box
- Germania
- USA
- Serbia
- France
Fiddle /
I have problem when i try to check if some countury checked..
searchContainer: function() {
var title = $(".title-search");
// On click show countury list
title.click(function(){
$(".state").fadeToggle('fast',function(){
// check if sothing checked
if ($("#france").is(':checked')) {
alert("France Selected");
// Show all cities from this countury
}
});
});
}
But when i check a country nothing happens....
First time i try this:
if($("#france").checked = true)) {
alert("FRANCE");
}
But when i click on title and when fadeToggle is done he show alert(FRANCE) whitout checking.
HTML :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src=".8.3/jquery.min.js"></script>
<script src="javascript/gfactory.js"></script>
<link rel="stylesheet" type="text/css" href="css/gfactory.css">
<script>
$(document).ready(function() {
window.Balcanrent.init();
window.Balcanrent.searchContainer();
});
</script>
</head>
<body>
<form name="search">
<div class="search-box">
<div class="title-search"> Counturies </div>
<div class="state">
<ul class="s_list">
<li><input id="ger" type="checkbox" value="gr">Germania</li>
<li><input id="usa" type="checkbox" value="usa">USA</li>
<li><input id="sr" type="checkbox" value="sl"> Serbia </li>
<li><input id="france" type="checkbox" value="fr">France </li>
</ul>
</div>
</div>
</form>
</body>
</html>
And i try to use .length > 0 but nothing again. What i do wrong?
Thanks.
Somthing is wrong with this code.
I have div box and when click on Coutries title he shows the list of countries. that list contain 5 check box
- Germania
- USA
- Serbia
- France
Fiddle http://jsfiddle/ikac/bfaH5/
I have problem when i try to check if some countury checked..
searchContainer: function() {
var title = $(".title-search");
// On click show countury list
title.click(function(){
$(".state").fadeToggle('fast',function(){
// check if sothing checked
if ($("#france").is(':checked')) {
alert("France Selected");
// Show all cities from this countury
}
});
});
}
But when i check a country nothing happens....
First time i try this:
if($("#france").checked = true)) {
alert("FRANCE");
}
But when i click on title and when fadeToggle is done he show alert(FRANCE) whitout checking.
HTML :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://ajax.googleapis./ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="javascript/gfactory.js"></script>
<link rel="stylesheet" type="text/css" href="css/gfactory.css">
<script>
$(document).ready(function() {
window.Balcanrent.init();
window.Balcanrent.searchContainer();
});
</script>
</head>
<body>
<form name="search">
<div class="search-box">
<div class="title-search"> Counturies </div>
<div class="state">
<ul class="s_list">
<li><input id="ger" type="checkbox" value="gr">Germania</li>
<li><input id="usa" type="checkbox" value="usa">USA</li>
<li><input id="sr" type="checkbox" value="sl"> Serbia </li>
<li><input id="france" type="checkbox" value="fr">France </li>
</ul>
</div>
</div>
</form>
</body>
</html>
And i try to use .length > 0 but nothing again. What i do wrong?
Thanks.
Share Improve this question edited Aug 10, 2013 at 18:20 Jony asked Aug 10, 2013 at 17:41 JonyJony 5992 gold badges6 silver badges15 bronze badges 6- 1 Can you show your HTML? – putvande Commented Aug 10, 2013 at 17:43
- 1 try : document.getElementById("checkboxid").checked property of JS. – Vedant Terkar Commented Aug 10, 2013 at 17:46
-
1
jQuery.prop()is the correct way to determine if a checkbox is checked (see my answer). – jahroy Commented Aug 10, 2013 at 17:47 - Nope this dont work on my code – Jony Commented Aug 10, 2013 at 18:03
- It would help if you made a JSFiddle of your example so everyone could see exactly what you're trying – Sean Redmond Commented Aug 10, 2013 at 18:09
3 Answers
Reset to default 4If you prefer to use the CSS selector approach, you can do this:
var c = $('#france').is(":checked");
Or:
var c = $('#france').prop("checked");
.prop() is probably the better choice.
From here: http://api.jquery./prop/ - is() and prop(), while they retrieve different things, both work reliably. While using attr() has a different meaning - it retrieves only the default value
I have created a fiddle here for you.
http://jsfiddle/kyawsithu/shC3c/1/
Below code you used for checking the Checkbox checked property is correct.
if ($("#france").is(':checked')) {
alert("France Selected");
}
EDIT: When you click again on Countries when States fade in, the checked is still true and it shows the alert.
Hope this can help you..
var title = $(".title-search");
title.click( function(){
var selected = '';
$('.s_list input:checked').each(function() {
selected += $(this).attr('id') + ',';
});
$(".state").fadeToggle('fast');
if(selected.length)
alert('selected: ' + selected);
});