复选框：onclick 不“检查”框答案

【问题标题】：checkbox : onclick not 'checking' the box复选框：onclick 不“检查”框
【发布时间】：2014-02-24 09:06:56
【问题描述】：

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

现在，我的问题有所不同。 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/

【问题讨论】：

编辑关闭输入标签。

标签： javascript jquery html checkbox onclick

【解决方案1】：

从Styled checkbox and radios下载js和css

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

【讨论】：

【解决方案2】：

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

【讨论】：

没有。我在控制台中看不到任何错误。我正在使用萤火虫。
我建议你使用谷歌浏览器而不是firebug，谷歌浏览器更有助于发现js冲突的问题。

【解决方案3】：

一个潜在的解决方案是为您的输入字段分配一个标识符并应用

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

【讨论】：

我需要在 custom-form-elements.js 哪里添加这个？
某个事件的内部。为您的实现量身定制选择器。

【解决方案4】：

试试这个代码。这将检查您在 onclick 类“复选框”标签中的复选框

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

【讨论】：