This question already has an answer here:
I am super frustrated right now because I have some code that works correctly on jsfiddle and not on my local host..
Here is the link to my jsfiddle page. The goal is to be able to specify how many checkbox's can be selected at once, and also to have them animated well via css as you see on this jsfiddle page. http://ift.tt/1zNIKhh
In order to test it on my local host, I Completely stripped down everything on my page aside of just the absolute things I needed for this to work and then even made my css and Js Inline to illustrate better.
Here is the exact code from my test.php page in localhost
<html>
<head>
<!--CSS To Make Check Box's Look Good-->
<style type="text/css">
.example{
margin-bottom : 1.5em;
}
input[type=checkbox]:not(old),
input[type=radio ]:not(old){
width : 2em;
margin : 0;
padding : 0;
font-size : 1em;
opacity : 0;
}
input[type=checkbox]:not(old) + label,
input[type=radio ]:not(old) + label{
display : inline-block;
margin-left : -2em;
line-height : 1.5em;
}
input[type=checkbox]:not(old) + label > span,
input[type=radio ]:not(old) + label > span{
display : inline-block;
width : 0.875em;
height : 0.875em;
margin : 0.25em 0.5em 0.25em 0.25em;
border : 0.0625em solid rgb(192,192,192);
border-radius : 0.25em;
background : rgb(224,224,224);
background-image : -moz-linear-gradient(rgb(240,240,240),rgb(224,224,224));
background-image : -ms-linear-gradient(rgb(240,240,240),rgb(224,224,224));
background-image : -o-linear-gradient(rgb(240,240,240),rgb(224,224,224));
background-image : -webkit-linear-gradient(rgb(240,240,240),rgb(224,224,224));
background-image : linear-gradient(rgb(240,240,240),rgb(224,224,224));
vertical-align : bottom;
}
input[type=checkbox]:not(old):checked + label > span,
input[type=radio ]:not(old):checked + label > span{
background-image : -moz-linear-gradient(rgb(224,224,224),rgb(240,240,240));
background-image : -ms-linear-gradient(rgb(224,224,224),rgb(240,240,240));
background-image : -o-linear-gradient(rgb(224,224,224),rgb(240,240,240));
background-image : -webkit-linear-gradient(rgb(224,224,224),rgb(240,240,240));
background-image : linear-gradient(rgb(224,224,224),rgb(240,240,240));
}
input[type=checkbox]:not(old):checked + label > span:before{
content : '✓';
display : block;
width : 1em;
color : rgb(153,204,102);
font-size : 0.875em;
line-height : 1em;
text-align : center;
text-shadow : 0 0 0.0714em rgb(115,153,77);
font-weight : bold;
}
input[type=radio]:not(old):checked + label > span > span{
display : block;
width : 0.5em;
height : 0.5em;
margin : 0.125em;
border : 0.0625em solid rgb(115,153,77);
border-radius : 0.125em;
background : rgb(153,204,102);
background-image : -moz-linear-gradient(rgb(179,217,140),rgb(153,204,102));
background-image : -ms-linear-gradient(rgb(179,217,140),rgb(153,204,102));
background-image : -o-linear-gradient(rgb(179,217,140),rgb(153,204,102));
background-image : -webkit-linear-gradient(rgb(179,217,140),rgb(153,204,102));
background-image : linear-gradient(rgb(179,217,140),rgb(153,204,102));
}
<!--End Of CSS-->
</style>
<script type="text/javascript">
$(document).ready(function () {
$("input[name='toppingtypes']").change(function () {
var maxAllowed = 2;
var cnt = $("input[name='toppingtypes']:checked").length;
if (cnt > maxAllowed) {
$(this).prop("checked", "");
alert('You can select ' + maxAllowed + ' Toppings');
}
});
});
</script>
</head>
</body>
<!--Pizza Toppings Types Start-->
<li id="pizzatoppingtypes">
<div class="title-wrapper">
<h2>Select Your Pizza Toppings</h2>
</div>
<div>
<form method="post" action="submit.php" name="toppingtypes" id="contact-form">
<div id="main">
<div class="example">
<div>
<input id="bacon" type="checkbox" name="toppingtypes" value="1" /><label style="color:black" for="bacon"><span><span></span></span>Bacon</label>
</div>
<div>
<input id="bananapeppers" type="checkbox" name="toppingtypes" value="2" /><label style="color:black" for="bananapeppers"><span><span></span></span>Banana Peppers</label>
</div>
<div>
<input id="blackolives" type="checkbox" name="toppingtypes" value="3" /><label style="color:black" for="blackolives"><span><span></span></span>Black Olives</label>
</div>
<div>
<input id="extracheese" type="checkbox" name="toppingtypes" value="4" /><label style="color:black" for="extracheese"><span><span></span></span>Extra Cheese</label>
</div>
<div>
<input id="greenpeppers" type="checkbox" name="toppingtypes" value="5" /><label style="color:black" for="greenpeppers"><span><span></span></span>Green Peppers</label>
</div>
<div>
<input id="ham" type="checkbox" name="toppingtypes" value="6" /><label style="color:black" for="ham"><span><span></span></span>Ham</label>
</div>
<div>
<input id="hamburger" type="checkbox" name="toppingtypes" value="7" /><label style="color:black" for="hamburger"><span><span></span></span>Hamburger</label>
</div>
<div>
<input id="italiansausage" type="checkbox" name="toppingtypes" value="8" /><label style="color:black" for="italiansausage"><span><span></span></span>Italian Sausage</label>
</div>
<div>
<input id="jalapenopeppers" type="checkbox" name="toppingtypes" value="9" /><label style="color:black" for="jalapenopeppers"><span><span></span></span>Jalapeno Peppers</label>
</div>
<div>
<input id="cannedmushrooms" type="checkbox" name="toppingtypes" value="10" /><label style="color:black" for="cannedmushrooms"><span><span></span></span>Canned Mushrooms</label>
</div>
<div>
<input id="freshmushrooms" type="checkbox" name="toppingtypes" value="11" /><label style="color:black" for="freshmushrooms"><span><span></span></span>Fresh Mushrooms</label>
</div>
<div>
<input id="onions" type="checkbox" name="toppingtypes" value="12" /><label style="color:black" for="onions"><span><span></span></span>Onions</label>
</div>
<div>
<input id="pepperoni" type="checkbox" name="toppingtypes" value="13" /><label style="color:black" for="pepperoni"><span><span></span></span>Pepperoni</label>
</div>
<div>
<input id="pineapple" type="checkbox" name="toppingtypes" value="14" /><label style="color:black" for="pineapple"><span><span></span></span>Pineapple</label>
</div>
<div>
<input id="slicedsmokedsausage" type="checkbox" name="toppingtypes" value="15" /><label style="color:black" for="slicedsmokedsausage"><span><span></span></span>Sliced Smoked Sausage</label>
</div>
<div>
<input id="tomatoes" type="checkbox" name="toppingtypes" value="16" /><label style="color:black" for="tomatoes"><span><span></span></span>Tomatoes</label>
</div>
</div>
</div>
</form>
</div>
</li>
<!--Pizza Toppings Types End-->
</body>
</html>
Please test it yourself on your lamp/mamp/wamp server and see if you have any better luck.
Thanks again!
Aucun commentaire:
Enregistrer un commentaire