Question

Javascript复选框脚本（by ryanfait）在我最初使用它时效果很好。然后我需要改变我制作的表格，以便asp.net可以处理表单，但现在复选框是默认的。

有没有办法改变脚本使其在asp：复选框上工作？我这样调用函数：

$(document).ready(function() {
    $('input[type=checkbox]').checkbox(); 
    });

而here是实际的javascript。

目前我的网页上有两种不同类型的复选框，一个<asp:Checkbox ... />和一个<input type="checkbox" ... />。第二个被设置样式，asp复选框没有...

我还没有联系到Ryan Fait，因为我希望这是一个常见的“错误”。

编辑：脚本的工作方式是，它找到所有带有class =“styled”的元素，隐藏它然后在元素旁边放置一个span。不知何故，在我的源代码中，对于asp：复选框，这种情况发生得太早了。看：

<input type="checkbox" class="styled" /><span class="styled"><input id="ctl00_contentPlaceHolderRightColumn_newsletter" type="checkbox" name="ctl00$contentPlaceHolderRightColumn$newsletter" /></span>

跨度是存在的，可见的和所有的，它不应该（我相信，因为第一个复选框以我想要的样式显示，第二个不显示）。

到目前为止，我发现了问题的一部分。 javascript无法以某种方式更改asp复选框，但是当我手动添加javascript应该创建的span时，复选框不再作为复选框工作。我在下面的答案中添加了一些细节。

Answer 1

在您的复选框上设置ID，然后按该ID引用它，如下所示：

<asp:checkbox id="mycheck" />

然后像这样引用它：

$('#mycheck').checkbox();

如果这不起作用，请在完成之前执行许多Web开发人员：下载Firefox，安装Firebug，并在控制台中检查选择器逻辑。我发现在Firefox中开发总是更容易，即使我的目标平台是IE。

Answer 2

我找到了部分答案。

当我添加span时，插件会手动创建，如下所示：

<span class="checkbox" style="background-position: 0pt 0pt;"><asp:CheckBox ... /></span>

我确实在实际的复选框中看到了漂亮的复选框！但是，样式框不是交互式的。当我单击它或将鼠标悬停在它上面时它不会改变，也不会记录点击。它基本上不再是一个复选框，只是一个很好看的广场。显示的实际asp复选框会注册点击次数，但这是丑陋的标准。

<span class="checkbox" style="background-position: 0pt 0pt;"><asp:CheckBox ID="anId" runat="server" style="visibility: hidden;" /></span>

可见性：隐藏使“真实”复选框消失，留下美观而又破碎的复选框。

Answer 3

我认为你的问题可能是因为asp：CheckBox控件默认自动包装在span标签中，并且在asp上设置CssClass属性：CheckBox控件实际上将类添加到了span（不是输入）标签。

您可以使用'InputAttributes'在输入标记上设置类，如下所示：

chkMyCheckbox.InputAttributes.Add("class","styled");
...
<asp:checkbox id="chkMyCheckbox" />

然后，您应该可以使用现有的JavaScript定位复选框。

Answer 4

您无需使用'type'属性。以下是否适用于您？

$(document).ready(function() {
    $('input:checkbox').....etc
});

Answer 5

知道了。

忘记RyanFait解决方案，这个适用于所有复选框。：d

var boxes;
var imgCheck = 'Images/checkbox-aangevinkt.png';
var imgUncheck = 'Images/checkbox.png';

function replaceChecks(){ 

    boxes = document.getElementsByTagName('input');
    for(var i=0; i < boxes.length; i++) {
        if(boxes[i].getAttribute('type') == 'checkbox') { 
            var img = document.createElement('img');
            if(boxes[i].checked) {
                img.src = imgCheck;
            } else {
                img.src = imgUncheck;
            }
            img.id = 'checkImage'+i;
            img.onclick = new Function('checkChange('+i+')');
            boxes[i].parentNode.insertBefore(img, boxes[i]);
            boxes[i].style.display='none'; 
        }
    }
}
function checkChange(i) {
    if(boxes[i].checked) {
        boxes[i].checked = '';
        document.getElementById('checkImage'+i).src=imgUncheck;
    } else {
        boxes[i].checked = 'checked';
        document.getElementById('checkImage'+i).src=imgCheck;
    }
}

带有<asp：checkbox> </asp：checkbox>的Javascript复选框

5 个答案: