复选框：onclick没有“检查”框

我试图为复选框，单选按钮和选择框做风格。
我从ryanfait获得了一个插件[http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/]，并且如果我们按照他提到的那样编写了HTML，它就可以很好地工作。

复选框：onclick没有“检查”框

现在，我的问题有所不同。 HTML代码将如下所示。

<label class="checkBox"> 
    <input type="checkbox" id="rememberMember" class="styled"/> 
    Remember me 
</label>

<input type="checkbox" id="rememberMember" class="styled"/> 
<label class="checkBox" for="rememberMember">Remember me</label>

在点击复选框 - 它没有显示刻度线。
点击'记住我'文本 - 显示刻度标记。

我认为问题在于标签。

有什么可能的方法（编辑JS文件）？ JS文件：http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/custom-form-elements.js

我把JSfiddle，但它不是加载图像！
http://jsfiddle.net/smilyface/pXETM/1/

来源

2014-02-24 smilyface

编辑为关闭输入标签。 – smilyface

下载js和css从Styled checkbox and radios

Working Demo

全码

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>JS Bin</title> 
    <link rel="stylesheet" href="http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/form.css" /> 
    <script src="http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/custom-form-elements.js"></script> 
</head> 
<body> 
    <input type="checkbox" id="rememberMember" class="vAlignMiddle styled" name="remember_member_id" /> 
<span class="checkBoxLabel">Remember me</span> 
    <br/> 
    <label> 
    <input type="radio" class="styled" name="radio"/> Yes 
</label> 
<br/> 
<label for="radio_no"> 
<input type="radio" class="styled" name="radio" id="radio_no"> 
No</label> 
</body> 
</html>

Demo

来源

2014-02-24 09:14:35

谢谢rohan。这是很好的去。 – smilyface

一个潜在的解决办法是赋予您的输入字段标识和应用

$("#myObj").click(function() { 
    // This is what gets executed onClick 
    $("#myCheckbox").prop("checked", true); 
});

来源

2014-02-24 09:09:03 martynas

我需要在custom-form-elements.js中添加它吗？ – smilyface

内部的一些事件。根据您的实现量身定制选择器。 – martynas

它可能在js文件冲突，您可以在Web浏览器的控制台jquery的错误。要解决此错误，您需要确定该控制台错误的解决方案。

来源

2014-02-24 09:12:12 DeepakJ

不，我不能在控制台中看到任何错误。我正在使用萤火虫。 – smilyface

我建议你使用谷歌浏览器而不是萤火虫，谷歌浏览器更有助于发现关于js冲突的问题。 – DeepakJ

试试这个代码。这将检查您的复选框onclick与类'复选框'

<script> 
    $('.checkBox').click(function() { 
     $("#rememberMember").prop("checked", true); 
    }); 
</script>

来源

2014-02-24 09:21:39 chriz

复选框：onclick没有“检查”框

回答

相关问题