当复选框被选中

8

这jQuery将做到这一点：

$('#seo').change(function(){ 
    if($(this).is(":checked")) { 
     $(this).addClass("checked"); 
    } else { 
     $(this).removeClass("checked"); 
    } 
});

的工作示例见this jQuery fiddle。

编辑：

如果你需要在IE中工作过，使用click事件，而不是：

$('#seo').click(function(){ 
    if($(this).is(":checked")) { 
     $(this).addClass("checked"); 
    } else { 
     $(this).removeClass("checked"); 
    } 
});

来源

2011-08-28 19:16:42 Nathan

+1

IIRC，在IE中，复选框需要在更改事件触发前模糊。你最好使用点击事件。 – Dennis

+1

@丹尼斯我编辑了我的答案。我真的很讨厌IE！ – Nathan

1

使用jQuery：

$('input[type="checkbox"]').change(function() { 
    if (this.checked) { 
     $(this).addClass('checked'); 
    } else { 
     $(this).removeClass('checked'); 
    } 
});

来源

2011-08-28 19:14:53 arnaud576875

+0

我在页面中有多个复选框。我如何通过ID选择它们？ – Andrei

+0

@Andrei看到我上面的答案。你可以参考ID，它全是jQuery。 – Nathan

2

你可以从这个推断：jQuery toggleClass and check checkbox

但本质上，你可以使用toggleClass切换特定CSS类：

$("#seo").click(function() { 
    $(this).toggleClass("cssClassToToggle"); 
});

或使用addClass仅添加新类：

$("#seo").click(function() { 
    $(this).addClass("cssClassToToggle"); 
});

如果您正在谈论一系列复选框，您也可以使用$(":checkbox")。

来源

2011-08-28 19:15:58

1

$('#seo').click(function() { 
    if (this.checked) { 
     $(this).addClass('selected'); 
    } else { 
     $(this).removeClass('selected'); 
    } 
});

来源

2011-08-28 19:16:42 Dennis

2

而且在纯JavaScript（适用于HTML5）

document.getElementById ('seo').addEventListener ('click', function (ev) { 
    ev.target.parentNode.classList[ ev.target.checked ? 'add' : 'remove'] ('selected'); 
    }, false);

有也是一个classList.toggle函数，但总会有复选框和classList失去同步的危险。

来源

2011-08-28 19:26:37 HBP

2

这里是纯js，当任何复选框被选中或未选中时，这些js将用于添加和删除选定的类。

工作例如：http://jsfiddle.net/S9tSS/

var inputs = document.getElementsByTagName("input"); 
var checkboxes = []; 

for (var i = 0; i < inputs.length; i++) { 
    if (inputs[i].type == "checkbox") { 
    checkboxes.push(inputs[i]); 
    if (inputs[i].checked) { 
     checked.push(inputs[i]); 
    } 
    } 
} 

for (var j = 0; j < checkboxes.length; j++) { 
    checkboxes[j].onclick = function() { 
     if (this.checked == true) { 
      this.className += " selected"; 
     } else { 
      removeClassName(this, 'selected'); 
     } 
    } 
} 

function removeClassName(e,t) { 
    if (typeof e == "string") { 
     e = xGetElementById(e); 
    } 
    var ec = ' ' + e.className.replace(/^\s+|\s+$/g,'') + ' '; 
    var nc = ec; 
    if (ec.indexOf(' '+t+' ') != -1) { 
     nc = ec.replace(' ' + t + ' ',' '); 
    } 
    e.className = nc.replace(/^\s+|\s+$/g,''); 
    return true; 
}

来源：...嗯...我会发布他们，但我是一个新的使用不能发布两个以上的链路。

来源

2011-08-28 20:23:35

1

$('#seo').click(function(){ 
    $(this).toggleClass('selected', this.checked); 
});

来源

2011-08-30 04:59:32 alex

当复选框被选中

回答

相关问题