I have a problem here.
I'm wondering why my page is giving the wrong output.
For example,when I tick A ...it displayed C instead of the correct one which was supposed to be A.
Then for the last 3 which are J,K,L...it would not display anything at all.
<!DOC HTML>
<html>
<title></title>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-
1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="jquery-1.11.0.min.js"></script>
<script src="jquery.cycle.all.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('ul#nav > li').click(function () {
selfActive = $(this).hasClass("show") ? true : false;
$(".show").removeClass("show").find("ul").slideDown();
if (!selfActive) {
$(this).addClass("show").find("ul").slideDown();
}
});
});
$(document).ready(function () {
$("input[name='Option']").change(function () {
var maxAllowed = 3;
var cnt = $("input[name='Option']:checked").length;
if (cnt > maxAllowed) {
$(this).prop("checked", "");
alert('You can select maximum ' + maxAllowed + ' phones only!!');
}
});
});
$(document).ready(function () {
$('input[type="submit"]').click(function () {
if ($('input[name=Option]:checked').length > 1) {
$('.frame-wrapper').fadeOut();
$('input[name=Option]').each(function () {
if ($(this).prop("checked")) {
$('.frame-wrapper').eq($(this).index() - 1).fadeIn();
}
});
}
else {
alert("You must compare with more than 1 item.!!");
}
});
$('input[type="compare"]').click(function () {
$('.frame-wrapper').eq($(this).index() - 1).fadeIn();
});
});
</script>
<style type="text/css">
.frame-wrapper {
display: none;
float: left;
width: 32%;
margin-top: 20px;
margin-right: 1%;
border-radius: 30px;
background-color: #eee;
}
#nav li > ul {
display: none;
}
</style>
</head>
<body>
<b>Please select an option</b>
<hr>
<ul id="nav">
<li>
<a href="#">Category 1</a>
<ul>
<li>
A <input type="checkbox" name="Option" />
B <input type="checkbox" name="Option" />
C <input type="checkbox" name="Option" />
</ul>
</li>
</ul></hr>
<hr>
<ul id="nav">
<li>
<a href="#">Category 2</a>
<ul>
<li>
D <input type="checkbox" name="Option" />
E <input type="checkbox" name="Option" />
F <input type="checkbox" name="Option" />
</ul>
</li>
</hr>
</ul><hr>
<ul id="nav">
<li>
<a href="#">Category 3</a>
<ul>
<li>
G <input type="checkbox" name="Option" />
H <input type="checkbox" name="Option" />
I <input type="checkbox" name="Option" />
</ul>
</li>
</hr>
</ul><hr>
<ul id="nav">
<li>
<a href="#">Category 4</a>
<ul>
<li>
J <input type="checkbox" name="Option" />
K <input type="checkbox" name="Option" />
L <input type="checkbox" name="Option" />
</ul>
</li>
</ul></hr>
<input type="submit" value="Compare" />
<form>
<input type="button" value="Clear"
onclick="window.location.href=window.location.href">
</form>
<div style="clear: both;"></div>
<div id="tblA" class="frame-wrapper">
<b><em>You Selected A</em></b>
</div>
<div id="tblB" class="frame-wrapper">
<b><em>You Selected B</em></b>
</div>
<div id="tblC" class="frame-wrapper">
<b><em>You Selected C</em></b>
</div>
<div id="tblD" class="frame-wrapper">
<b><em>You Selected D</em></b>
</div>
<div id="tblE" class="frame-wrapper">
<b><em>You Selected E</em></b>
</div>
<div id="tblF" class="frame-wrapper">
<b><em>You Selected F</em></b>
</div>
<div id="tblG" class="frame-wrapper">
<b><em>You Selected G</em></b>
</div>
<div id="tblH" class="frame-wrapper">
<b><em>You Selected H</em></b>
</div>
<div id="tblI" class="frame-wrapper">
<b><em>You Selected I</em></b>
</div>
<div id="tblJ" class="frame-wrapper">
<b><em>You Selected J</em></b>
</div>
<div id="tblK" class="frame-wrapper">
<b><em>You Selected K</em></b>
<div id="tblL" class="frame-wrapper">
<b><em>You Selected L</em></b>
</div>
</div>
</body>
</html>
I have done a lot of changes in your html/js (bcoz I have some free time :) )
Points to note before copying/pasting:
HTML:
<b>Please select an option</b>
<hr>
<ul class="nav">
<li><a href="#">Category 1</a>
<ul>
<li>
A <input type="checkbox" value="A" name="Option" />
B <input type="checkbox" value="B" name="Option" />
C <input type="checkbox" value="C" name="Option" />
</li>
</ul>
</li>
</ul>
<hr>
<ul class="nav">
<li>
<a href="#">Category 2</a>
<ul>
<li>
D <input type="checkbox" value="D" name="Option" />
E <input type="checkbox" value="E" name="Option" />
F <input type="checkbox" value="F" name="Option" />
</li>
</ul>
</li>
</ul><hr>
<ul class="nav">
<li>
<a href="#">Category 3</a>
<ul>
<li>
G <input type="checkbox" value="G" name="Option" />
H <input type="checkbox" value="H" name="Option" />
I <input type="checkbox" value="I" name="Option" />
</li>
</ul>
</li>
</ul><hr>
<ul class="nav">
<li>
<a href="#">Category 4</a>
<ul>
<li>
J <input type="checkbox" value="J" name="Option" />
K <input type="checkbox" value="K" name="Option" />
L <input type="checkbox" value="L" name="Option" />
</li>
</ul>
</li>
</ul></hr>
<input type="submit" value="Compare" />
<div style="clear: both;"></div>
<div id="tblA" class="frame-wrapper">
<b><em>You Selected A</em></b>
</div>
<div id="tblB" class="frame-wrapper">
<b><em>You Selected B</em></b>
</div>
<div id="tblC" class="frame-wrapper">
<b><em>You Selected C</em></b>
</div>
<div id="tblD" class="frame-wrapper">
<b><em>You Selected D</em></b>
</div>
<div id="tblE" class="frame-wrapper">
<b><em>You Selected E</em></b>
</div>
<div id="tblF" class="frame-wrapper">
<b><em>You Selected F</em></b>
</div>
<div id="tblG" class="frame-wrapper">
<b><em>You Selected G</em></b>
</div>
<div id="tblH" class="frame-wrapper">
<b><em>You Selected H</em></b>
</div>
<div id="tblI" class="frame-wrapper">
<b><em>You Selected I</em></b>
</div>
<div id="tblJ" class="frame-wrapper">
<b><em>You Selected J</em></b>
</div>
<div id="tblK" class="frame-wrapper">
<b><em>You Selected K</em></b>
</div>
<div id="tblL" class="frame-wrapper">
<b><em>You Selected L</em></b>
</div>
JS:
$(document).ready(function () {
$('ul.nav > li').click(function () {
$(this).find("ul").slideDown();
});
$(":checkbox").change(function () {
var maxAllowed = 3;
var cnt = $(":checkbox:checked").length;
if (cnt > maxAllowed) {
$(this).prop("checked", "");
alert('maximum ' + maxAllowed);
}
});
$(':submit').click(function () {
if ($(':checkbox:checked').length > 1) {
$('.frame-wrapper').fadeOut();
$(':checkbox').each(function () {
if ($(this).prop("checked")) {
$('#tbl' + $(this).val()).fadeIn();
}
});
}
else {
alert("You must compare with more than 1 item.!!");
}
});
});
at last the jsfiddle example also: http://jsfiddle.net/yJ8rV/
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments