[英]Javascript checkboxes with <asp:checkbox />
The Javascript checkbox script ( by ryanfait ) worked beautifully when I used it at first. 当我最初使用Javascript复选框脚本( 由ryanfait编写 )时,它的工作效果非常好。 Then I needed to alter the form I made so that asp.net could process the form, but now the checkboxes are default.
然后,我需要更改我制作的表单,以便asp.net可以处理该表单,但是现在复选框是默认的。
Is there a way to alter the script to make it work on the asp:checkbox? 有没有办法更改脚本以使其在asp:checkbox上运行? I call the function like so:
我这样调用该函数:
$(document).ready(function() {
$('input[type=checkbox]').checkbox();
});
And here is the actual javascript. 这是实际的javascript。
I have two different types of checkboxes on my page at the moment, one <asp:Checkbox ... />
and one <input type="checkbox" ... />
. 目前,我的页面上有两种不同类型的复选框,一种
<asp:Checkbox ... />
和一种<input type="checkbox" ... />
。 The second one gets styled, the asp checkbox doesn't... 第二个被设置样式,asp复选框不...
I haven't contacted Ryan Fait yet, as I hoped this was a common "bug". 我尚未与Ryan Fait联系,因为我希望这是一个常见的“错误”。
EDIT: The way the script works is, it finds all elements with class="styled", hides it and then puts a span next to the element. 编辑:脚本的工作方式是,它找到所有具有class =“ styled”的元素,将其隐藏,然后在元素旁边放置一个跨度。 Somehow in my sourcecode, for the asp:checkbox this happens too early I think.
在我的源代码中,以某种方式,对于asp:checkbox,我认为为时过早。 Look:
看:
<input type="checkbox" class="styled" /><span class="styled"><input id="ctl00_contentPlaceHolderRightColumn_newsletter" type="checkbox" name="ctl00$contentPlaceHolderRightColumn$newsletter" /></span>
The span is there, visible and all, which it should not (I believe, as the first checkbox shows up in the style I want it to be, the second doesn't). 跨度在那里,可见且全部,它不应该(我相信,因为第一个复选框以我希望的样式显示,第二个则没有)。
So far, I found a part of the problem. 到目前为止,我发现了问题的一部分。 The javascript cannot change the asp checkbox somehow, but when I manually add the span the javascript is supposed to create, the checkbox doesn't work as a checkbox anymore.
javascript无法以某种方式更改asp复选框,但是当我手动添加应该创建javascript的跨度时,该复选框不再可用作复选框。 I added some details in my answer below.
我在下面的答案中添加了一些细节。
Set an ID on your checkbox and then reference it by that ID, like so: 在您的复选框上设置一个ID,然后通过该ID进行引用,如下所示:
<asp:checkbox id="mycheck" />
Then reference it like this: 然后像这样引用它:
$('#mycheck').checkbox();
If that doesn't work, do what many, many web developers before you have done: download Firefox, install Firebug, and check your selector logic in the console. 如果那不起作用,请在完成之前做许多很多Web开发人员的工作:下载Firefox,安装Firebug,并在控制台中检查选择器逻辑。 I find it's always easier to develop in Firefox, even when my target platform is IE.
我发现,即使我的目标平台是IE,使用Firefox进行开发也总是比较容易。
I found part of the answer. 我找到了答案的一部分。
When I add the span the plugin creates manually like so: 当我添加跨度时,插件将手动创建,如下所示:
<span class="checkbox" style="background-position: 0pt 0pt;"><asp:CheckBox ... /></span>
I do get the nicely looking checkbox UNDERNEATH the actual checkbox! 我确实在实际复选框的下面得到了漂亮的复选框! However, the styled box is not interactive.
但是,样式框不是交互式的。 It doesn't change when I click it or hover over it nor does it register the click.
当我单击它或将鼠标悬停在它上面时,它也不会更改,也不会注册该点击。 It's basically not a checkbox anymore, just a goodlooking square.
基本上不再是复选框,而是一个漂亮的正方形。 The actual asp checkbox that shows up does register clicks, but it's the ugly standard one.
显示的实际asp复选框会记录点击,但这是丑陋的标准点击。
<span class="checkbox" style="background-position: 0pt 0pt;"><asp:CheckBox ID="anId" runat="server" style="visibility: hidden;" /></span>
The visibility: hidden makes the "real" checkbox dissappear and leaves the goodlooking yet broken one. 可见性:隐藏使“真实”复选框消失,并留下美观但不完整的复选框。
I think that your problem could be caused by the fact that asp:CheckBox controls are automatically wrapped in a span tag by default, and setting the CssClass attribute on the asp:CheckBox control actually adds the class to the span (not the input) tag. 我认为您的问题可能是由于以下事实引起的:默认情况下,asp:CheckBox控件会自动包装在span标记中,而在asp:CheckBox控件上设置CssClass属性实际上会将类添加到span(而非输入)标记中。
You can set the class on the input tag using the 'InputAttributes' as follows: 您可以使用“ InputAttributes”在输入标签上设置类,如下所示:
chkMyCheckbox.InputAttributes.Add("class","styled");
...
<asp:checkbox id="chkMyCheckbox" />
This should then allow you to target the checkbox with your existing JavaScript. 然后,这应该允许您使用现有JavaScript定位复选框。
You don't need to use the 'type' attribute. 您不需要使用'type'属性。 Does the following work for you?
以下内容对您有用吗?
$(document).ready(function() {
$('input:checkbox').....etc
});
Got it. 得到它了。
Forget about the RyanFait Solution, this one works on ALL checkboxes. 忘记RyanFait解决方案,该解决方案适用于所有复选框。 :D
: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;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.