Question

我正在使用位于http://awardwinningfjords.com/2009/06/16/iphone-style-checkboxes.html的jQuery包将我现有的复选框转换为iPhone样式复选框。我遇到的问题是，在应用jQuery / iPhone样式后，当复选框状态发生变化时，我的复选框'onclick事件不会触发。我需要能够捕获onclick事件和状态更改的复选框的ID吗？知道我错过了什么吗？

Answer 1

就这样做

HTML

<input type="checkbox" class="iphone-checkbox" id="checkbox-id">

的javascript

$('.iphone-checkbox').iphoneStyle({onChange: function(elem, data) {alert(elem.attr('id')); alert(data);}});

在第一条警告信息中，您将看到

checkbox-id

在第二个

true/false（取决于是否选中复选框）

Answer 2

我最终做的是向iphone-style-checkbox.js添加自定义事件来执行此操作。寻找这一行

iOSCheckbox.prototype.didChange = function() {

然后他们在复选框

上设置了checked元素

this.onChange(this.elem, this.elem.attr('checked'));

添加：

this.elem.trigger("iphoneChange");

然后要绑定到此事件，您只需找到您的复选框并调用jQuery绑定函数：

$('#checkbox').bind('iphoneChange', function(e, data) {...});

唯一对我有用的东西。

Answer 3

尝试喜欢

。

herejQuery（ '＃checkbox_id'）ATTR（ '检查'，TRUE）; jQuery('#checkbox_id').trigger('change');

在“iphone-style-checkboxes.js”中，更改事件仅绑定。

Answer 4

我遇到了同样的问题。初始化复选框时，我通过添加onChange选项解决了这个问题：

$(".iPhone").iphoneStyle({ onChange : changeHandler });

希望这有帮助！

Answer 5

尝试捕获change事件而不是click事件。

Answer 6

如果您有任何难以使用jquery创建iphone之类的切换按钮，请查看http://talkerscode.com/webtricks/iphone-like-slide-toggle-button-using-jquery-and-css.php这肯定会解决您的问题

function on()
{
   $("#inner").animate({marginLeft:'50px'},function(){
     document.getElementById("choose").value="on";
     document.getElementById("wrapper").style.background="#04B404";
     document.getElementById("on").checked=true;
     document.getElementById("off").checked=false;
   });  
}

function off()
{
   $("#inner").animate({marginLeft:'0px'},function(){
     document.getElementById("choose").value="off";
     document.getElementById("wrapper").style.background="#E6E6E6"; 
     document.getElementById("off").checked=true;
     document.getElementById("on").checked=false;
   });
}

<div id="checkbox_div">
<input type="checkbox" id="on" value="ON">ON
<input type="checkbox" id="off" value="OFF">OFF
</div>

jQuery iPhone样式复选框事件

6 个答案: