在jQuery中选中复选框后显示文本字段

Question

我有一个带过滤器的div，如下所示： （复选框的类名是=＆gt; dynamicFilterInput ）

[ ] all product
[ ] bmw
[ ] mercedes
[x] audi

如果选中其中一个复选框，则必须在另一个<div>中显示文字，如下所示：

  

选择的过滤器：

     

•奥迪
  取消选中所有

我不知道该怎么做，我试过这个：

$(".dynamicFilterInput").on( "click", function() {
    $( "#tabs_pieces_select" ).html( $("input:checked").val() + " is checked!" );
});

但它不起作用。 我在控制台中收到此错误：

  

TypeError：$（...）。on不是函数

小提琴链接http://jsfiddle.net/WPnkh/

感谢您的帮助。

Answer 1

对于1.4.2版，请使用'delegate'/'bind'。事实上，如果您没有动态添加复选框，则无需使用on / delegate / bind。点击即可。

$(".dynamicFilterInput").click(function() { 
 $("#tabs_pieces_select").html($(this).val() + " ::: is checked");
});

以上代码仅用于使用点击功能。

Answer 2

试试这个：

$(".dynamicFilterInput").click(function () {
    if (this.checked) $("#tabs_pieces_select").html($(this).val() + " is checked!");
});

无论您选中还是取消选中复选框，都会调用此函数，因此我们需要确保在单击复选框并选中复选框时，只有文本显示在另一个div上。

Answer 3

您可以查看http://jsfiddle.net/5KdfB/

基本上，下面的代码会以某种方式起作用，但会出现一些小问题。

$（“。dynamicFilterInput”）。click（function（）{ $（“＃tabs_pieces_select”）。html（$（“input：checked”）。val（）+“已选中！”）;

这只会发布选中的第一个输入复选框，但如果我们选中两个或更多复选框，那么该代码只会显示第一个输入复选框。

$（'。dynamicFilterInput'）。on（'click'，function（）{     var choice = $（this）;

if (choice.is(":checked"))
{
    $('#choices' ).append( choice.val()  + " is checked!" );
}

}）;

希望这会有所帮助

Answer 4

使用.live()

$(".dynamicFilterInput").live("click", function() {
    $("#tabs_pieces_select").html($("input:checked").val()
            + " is checked!");
});