代码在 jsfiddle 中有效，但在 Lamp Localhost 中无效 [重复]答案

【问题标题】：Code works in jsfiddle But not Lamp Localhost [duplicate]代码在 jsfiddle 中有效，但在 Lamp Localhost 中无效 [重复]
【发布时间】：2015-04-22 22:20:50
【问题描述】：

我现在非常沮丧，因为我有一些代码可以在 jsfiddle 上正常工作，而不是在我的本地主机上..

这是我的 jsfiddle 页面的链接。目标是能够指定一次可以选择多少个复选框，并且还可以通过 css 对它们进行动画处理，正如您在此 jsfiddle 页面上看到的那样。 http://jsfiddle.net/SQdNQ/195/

为了在我的本地主机上测试它，我完全剥离了我页面上的所有内容，除了我需要的绝对内容，然后甚至让我的 css 和 Js Inline 更好地说明。

这是我在 localhost 中的 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 库？这些包含在您的 jsfiddle 中，但不包含在上面的代码中
<!-- cmets 是否允许在 <style> 块内？
另外，设置你的文档类型<!DOCTYPE html>
浏览器中有一个叫控制台的东西，你可以按F12打开它，它会显示问题所在。

标签： javascript html css forms checkbox

【解决方案1】：

您的脚本中没有包含 jQuery 引用。

将其包含在您的标题中：

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>

使用 CDN，或下载 jQuery 脚本并手动引用。

【讨论】：

哈这适用于剥离版本，但我的真实页面已经调用了 jquery 并且无法正常工作。其中调用了很多不同的 jquery 库。因此，也许我需要一次剥离一件事，以找出哪个没有使它起作用。谢谢您的帮助。如果我无法弄清楚，我会发布我的完整网页。

【解决方案2】：

小提琴之所以有效，是因为包含了jQuery。
您忘记在您的localhost 代码中包含jQuery。

试试这个：

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
the rest of your html...

【讨论】：

【解决方案3】：

除了 Pheonixblade9 和 Pedro Lobito 正确识别为可能的问题之外，另一个常见错误是通过浏览器中的文件访问打开网站，如下所示：

file:///c:\xampp\htdocs\index.php

如果您正在这样做，请尝试以下操作：

localhost

就是这样。

【讨论】：