<分区>
<分区>
我现在非常沮丧，因为我有一些代码可以在 jsfiddle 上正常工作，但不能在我的本地主机上正常工作..
这是我的 jsfiddle 页面的链接。目标是能够指定一次可以选择多少个复选框，并像您在这个 jsfiddle 页面上看到的那样通过 css 使它们动画效果很好。 http://jsfiddle.net/SQdNQ/195/
为了在我的本地主机上测试它，我完全剥离了我页面上的所有内容，除了我需要的绝对内容，然后甚至制作了我的 css 和 Js Inline 以更好地说明。
这是我在本地主机中的 test.php 页面的确切代码
<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>
请在您的 lamp/mamp/wamp 服务器上自行测试，看看您的运气是否更好。
再次感谢!
最佳答案
您没有在脚本中包含 jQuery 引用。
将此包含在您的 header 中:
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
使用 CDN，或下载 jQuery 脚本并手动引用。
关于javascript - 代码在 jsfiddle 中有效，但在 Lamp Localhost 中无效，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29809982/
相关文章：
javascript - JSON日期，显示服务器时区的原始日期
javascript - 测试期间单向绑定(bind)指令属性的更改不更新指令范围
javascript - 在 jquery 中检测滚动并更改操作
javascript - 使用 javascript 设置 HTML 类名
javascript - React - 如何为map函数的每个元素设置内联CSS？
javascript - 如何在 xcode 4.0.2 中调试 javascript？
javascript - 如何在 <a> 标签中添加 onclick 但不执行 href ="url"？