Question

我现在非常沮丧，因为我有一些代码在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>

请自行在灯泡/ mamp / wamp服务器上进行测试，看看你是否有更好的运气。

再次感谢！

Answer 1

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

在标题中加入：

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

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

Answer 2

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

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

如果您正在做的事情，请尝试这样做：

localhost

就是这样。

代码在jsfiddle中工作但不是Lamp Localhost

2 个答案: