Reputation: 939
What is wrong in following jquery code ? If the menu
which contains value 1
is selected, at least one submenu
must be checked.
It is not working, if submenu is checked, still it alert message and is stopping. I am trying adding [name='submenu[]']
or storing value in variable
but it doesn't work.
if ($("[name='menu[]']:checked").val() == 1) {
if ($("[name='submenu[][]']:checked").length == 0) {
alert('Select at least one submenu ');
return false;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li><input type="checkbox" name="menu[]" value="1">News
<ul>
<li><input type="checkbox" name="submenu[1][]" value="1">Local</li>
<li><input type="checkbox" name="submenu[1][]" value="2">National</li>
</ul>
</li>
<li><input type="checkbox" name="menu[]" value="2">Views</li>
<li><input type="checkbox" name="menu[]" value="3">Comment</li>
</ul>
Upvotes: 1
Views: 691
Reputation: 45
BY looking at you code what i understand is that you want to validate that atleast one checkbox must be cheked
give same class to similar check boxes like,
<li><input type="checkbox" class="submenuCkeckbox" name="submenu[1][]" value="1">Local</li>
<li><input type="checkbox" class="submenuCkeckbox" name="submenu[1][]" value="2">National</li>
in the validating function have a flag by default it will be set to false and that flag will be set if atleast one is cheked
function validate(){
var alertFlag = false;
$(".submenuCkeckbox").each(function () {
if ($(this).is(':checked')) {
alertFlag = true;
}
});
if (!alertFlag ) {
alert('Select Atleast one checkbox');
}
}
Upvotes: 0
Reputation: 9474
You can do it this way : https://codepen.io/creativedev/pen/aKwJGW
$(document).ready(function() {
$('input[type="checkbox"]').click(function () {
if ($("[name='menu[]']:checked").val() == 1) {
console.log($("[name^='submenu']:checked").length);
if ($("[name^='submenu']:checked").length == 0) {
alert('Select at least one submenu ');
//return false;
}
}
});
});
Upvotes: 1