1

我正在尝试实现 jQuery prettyCheckable 并且真的我有一个很好的风格：D，但 onclick 事件停止为我工作。我需要在我的输入复选框中的 onclick 事件来调用该函数。

此复选框成功：

<input id="checkId" type="checkbox" onClick="myFunction()"  />

function myFunction() {alert('works! :D');}

这个复选框很漂亮，但是 onClick 事件不起作用：

$('input.checkStyle').prettyCheckable();

<input id="checkId" type="checkbox" class="checkStyle" onClick="myFunction()"  />

function myFunction() {alert('not work :(');}

关于 prettyCheckable 的更多信息：http: //arthurgouveia.com/prettyCheckable/

谢谢，对不起我的英语！

4

3 回答 3

3

它不会触发，因为您没有点击它。您正在单击可样式化的占位符跨度。要检测复选框输入的更改，请使用 jquery 更改事件而不是侦听单击。

$('input.checkStyle').prettyCheckable();

$('#checkId').on('change', myFunction);

function myFunction() {alert('not work :(');}
于 2012-10-05T02:33:36.697 回答
0

正如@Jonathan Chow 所说，您可能忘记在标签之间放置 Javascript / Jquery 代码，如下所示：

<script type="text/javascript">
    function myFunction() {
        alert('WORKS');
    }
</script>
<input id="checkId" type="checkbox" class="checkStyle" onClick="myFunction()"  />​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

但是，需要注意的是：

当您使用 jQuery 时，您不一定需要“ onClick ”属性，该属性旨在简化 DOM 的操作和访问。

因此，解决方案可以重写如下：

<script type="text/javascript">
    $('#checkId').click(function() {
         alert('WORKS');
    });
</script>
<input id="checkId" type="checkbox" class="checkStyle"  />​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

此时，您所要做的就是使用 jQuery prettyCheckable函数（前提是已加载），一切就绪。这方面的一个例子是：

<script type="text/javascript">
    $('#checkId').click(function() {
         $(this).prettyCheckable();
    });
</script>
<input id="checkId" type="checkbox" class="checkStyle"  />​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
于 2012-10-05T02:37:01.023 回答
0

我不是 100% 确定你需要在这里完成什么。如果您想检测您的复选框或单选何时被选中（当您单击它时会发生这种情况），您应该将 on change 事件添加到它。

首先，在 HTML 上创建输入并导入 prettyCheckable CSS 和 JS 文件。

<input id="checkId" type="checkbox" class="checkStyle"  />​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

然后，在适当的 javascript 标记上，初始化插件，定义您的函数，然后使用适当的选择器将 .on('change') 事件添加到其中。

<script type="text/javascript">

  $('#checkId').prettyCheckable();

  function myFunction() {alert('Works!')}; 

  $('#checkId').on('change', myFunction);

</script>

这应该可以解决问题。

于 2012-10-09T04:12:37.643 回答