jQuery UI的复选框没有显示

Question

我：

<input name="ShowDeleted" type="checkbox" /> 
<label for="ShowDeleted">Show Deleted</label> 

，并在我的JavaScript，我有：

$('input[type=checkbox]').button(); 

我打电话，我打电话jQuery的是这样的：

<script src="http://www.google.com/jsapi"></script> 
<script src="myGoodness.js"></script> 

然后Javascript是：

google.load("jquery", "1"); 
google.load("jqueryui", "1"); 
var myLoadCallback = function() { 
    $('input[type=checkbox]').button(); 
}; 
google.setOnLoadCallback(myLoadCallback); 

问：为什么我没有看到一个jQuery UI风格的复选框？是否因为在jQuery加载之后但在jQuery UI加载之前调用myLoadCallback？

在Firebug中，我看到输入的类已添加到ui-helper-hidden-accessible中。

Answer 1

我能够像这样工作。

See Fiddle here

您label应该引用一个ID的for元素。

我将input更改为包含id="check"，并将label从for="ShowDeleted"更改为for="check"。

<input name="ShowDeleted" type="checkbox" /> 
<label for="ShowDeleted">Show Deleted</label> 

到

<input id="check" name="ShowDeleted" type="checkbox" /> 
<label for="check">Show Deleted</label> 

然后，我只是叫下面的JavaScript来创建jQuery的复选框按钮。

$('#check').button(); 

如果这些变化不会为你工作，ID建议确保您在了jQuery和jQuery UI的JS和CSS文件正确拉动。

Answer 2

这是因为<label>元素的for属性必须引用复选框的id属性，而不是其name。

添加一个id属性复选框解决您的问题：

<input id="ShowDeleted" name="ShowDeleted" type="checkbox" /> 
<label for="ShowDeleted">Show Deleted</label>