Javascript 选中时显示复选框名称

我试图植入一个函数，在选中复选框时显示其名称（而不是值）。我正在使用Ruby on Rail应用程序

所以我的jquery代码是

<script type="text/javascript">
        $(document).ready(function () {
            $('input[name="animaux"]').click(function () {
                getSelectedCheckBoxes('animaux');
            });
            $('input[name="handicap"]').click(function () {
                getSelectedCheckBoxes('handicap');
            });
            $('input[name="television"]').click(function () {
                getSelectedCheckBoxes('television');
            });
            $('input[name="barbecue"]').click(function () {
                getSelectedCheckBoxes('barbecue');
            });
            var getSelectedCheckBoxes = function (groupName) {
                var result = $('input[name="' + groupName + '"]:checked');
                if (result.length > 0) {
                    var resultString = "";
                    result.each(function () {
                        var selectedValue = $(this).val();
                        resultString += groupName + " - "
                            + $('label[for="option-' + selectedValue + '"]').text() + "<br/>";
                    });
                    $('#divfilter').html(resultString);
                }
                else {
                    $('#divfilter').html("");
                }
            };
        });
    </script> 

问题3: 有没有想过在名字之间加一个“unselect”的十字架

谢谢你的帮助

顺便说一句，很抱歉我英语不好，我是法国人……

我建议：

// find and retrieve all <input> elements of
// 'type=checkbox':
var checkboxes = $('input[type=checkbox]');

// use the on() method to bind the anonymous function
// as the event-handler of the 'change' event:
checkboxes.on('change', function(){

  // update the '#divfilter' element's text:
  $('#divfilter').text(function(){

    // we return the following as the new text:

    // first we filter the checkboxes collection to
    // retain only those that match the ':checked'
    // pseudo-class, and then create a map:
    return checkboxes.filter(':checked').map(function(){

      // the contents of the map are comprised of
      // the 'name' property of each checked check-box:
      return this.name;

    // we convert the map() into an Array, using get():
    }).get()

    // and join the Array elements together with the
    // supplied String, and finished with a period:
    .join(', ') + '.';
  });
});

//查找并检索
//'类型=复选框'：
var复选框=$（'input[type=checkbox]'）；
//使用on（）方法绑定匿名函数
//作为“更改”事件的事件处理程序：
复选框。on（'change'，function（）{
//更新“#divfilter”元素的文本：
$（'#divfilter'）.text（函数（）{
//我们将以下内容作为新文本返回：
//首先，我们将复选框集合筛选为
//仅保留与“：checked”匹配的内容
//伪类，然后创建一个映射：
返回复选框.filter（':checked'）.map（function（）{
//地图的内容包括
//每个复选框的“名称”属性：
返回此.name；
//我们使用get（）将map（）转换为数组：
}).get（）
//并将数组元素与
//提供的字符串，并以句点结束：
.join（'，'）+'；
});
});

//查找并检索
//'类型=复选框'：
var复选框=$（'input[type=checkbox]'）；
//使用on（）方法绑定匿名函数
//作为“更改”事件的事件处理程序：
复选框。on（'change'，function（）{
//更新“#divfilter”元素的文本：
$（'#divfilter'）.text（函数（）{
//我们将以下内容作为新文本返回：
//首先，我们将复选框集合筛选为
//仅保留与“：checked”匹配的内容
//伪类，然后创建一个映射：
返回复选框.filter（':checked'）.map（function（）{
//地图的内容包括
//每个复选框的“名称”属性：
返回此.name；
//我们使用get（）将map（）转换为数组：
}).get（）
//并将数组元素与
//提供的字符串，并以句点结束：
.join（'，'）+'；
});
});

我建议：

// find and retrieve all <input> elements of
// 'type=checkbox':
var checkboxes = $('input[type=checkbox]');

// use the on() method to bind the anonymous function
// as the event-handler of the 'change' event:
checkboxes.on('change', function(){

  // update the '#divfilter' element's text:
  $('#divfilter').text(function(){

    // we return the following as the new text:

    // first we filter the checkboxes collection to
    // retain only those that match the ':checked'
    // pseudo-class, and then create a map:
    return checkboxes.filter(':checked').map(function(){

      // the contents of the map are comprised of
      // the 'name' property of each checked check-box:
      return this.name;

    // we convert the map() into an Array, using get():
    }).get()

    // and join the Array elements together with the
    // supplied String, and finished with a period:
    .join(', ') + '.';
  });
});

//查找并检索
//'类型=复选框'：
var复选框=$（'input[type=checkbox]'）；
//使用on（）方法绑定匿名函数
//作为“更改”事件的事件处理程序：
复选框。on（'change'，function（）{
//更新“#divfilter”元素的文本：
$（'#divfilter'）.text（函数（）{
//我们将以下内容作为新文本返回：
//首先，我们将复选框集合筛选为
//仅保留与“：checked”匹配的内容
//伪类，然后创建一个映射：
返回复选框.filter（':checked'）.map（function（）{
//地图的内容包括
//每个复选框的“名称”属性：
返回此.name；
//我们使用get（）将map（）转换为数组：
}).get（）
//并将数组元素与
//提供的字符串，并以句点结束：
.join（'，'）+'；
});
});


//查找并检索
//'类型=复选框'：
var复选框=$（'input[type=checkbox]'）；
//使用on（）方法绑定匿名函数
//作为“更改”事件的事件处理程序：
复选框。on（'change'，function（）{
//更新“#divfilter”元素的文本：
$（'#divfilter'）.text（函数（）{
//我们将以下内容作为新文本返回：
//首先，我们将复选框集合筛选为
//仅保留与“：checked”匹配的内容
//伪类，然后创建一个映射：
返回复选框.filter（':checked'）.map（function（）{
//地图的内容包括
//每个复选框的“名称”属性：
返回此.name；
//我们使用get（）将map（）转换为数组：
}).get（）
//并将数组元素与
//提供的字符串，并以句点结束：
.join（'，'）+'；
});
});

可以给我们一些
标签
HTML代码吗请用复选框输入编辑我的帖子。可以给我们一些
标签
HTML代码吗请用复选框输入编辑我的帖子。谢谢你的回复。我测试了您的代码，但当我选中一个或多个复选框时，没有显示任何内容…：（我刚才添加的代码片段，在问题中可见的代码下面，演示了这确实适用于您提供的代码（尽管我必须自己添加
元素）；您是否有不同的行为？这真是太棒了！！感谢您的帮助：）这是一个很有魅力的工作。顺便问一下，你对我的问题3有什么想法吗？OP可能也会考虑在复选框上的一个类来“分组”它们，而不影响其他的复选框。page@DavidThomas很好的例子！OP：这是一个经过修改的版本，其中包含一些从这个答案推断出来的替代标记，谢谢你的回复。我测试了您的代码，但当我选中一个或多个复选框时，没有显示任何内容…：（我刚才添加的代码片段，在问题中可见的代码下面，演示了这确实适用于您提供的代码（尽管我必须自己添加
元素）；您是否有不同的行为？这真是太棒了！！感谢您的帮助：）这是一个很有魅力的工作。顺便问一下，你对我的问题3有什么想法吗？OP可能也会考虑在复选框上的一个类来“分组”它们，而不影响其他的复选框。page@DavidThomas很好的例子！OP：这是一个经过改进的版本，其中包含一些从这个答案推断出来的替代标记
$('input[name="animaux"]').click(function () {
                    getSelectedCheckBoxes('animaux');
                });
                $('input[name="handicap"]').click(function () {
                    getSelectedCheckBoxes('handicap');
                });
                $('input[name="television"]').click(function () {
                    getSelectedCheckBoxes('television');
                });
                $('input[name="barbecue"]').click(function () {
                    getSelectedCheckBoxes('barbecue');
                });

// find and retrieve all <input> elements of
// 'type=checkbox':
var checkboxes = $('input[type=checkbox]');

// use the on() method to bind the anonymous function
// as the event-handler of the 'change' event:
checkboxes.on('change', function(){

  // update the '#divfilter' element's text:
  $('#divfilter').text(function(){

    // we return the following as the new text:

    // first we filter the checkboxes collection to
    // retain only those that match the ':checked'
    // pseudo-class, and then create a map:
    return checkboxes.filter(':checked').map(function(){

      // the contents of the map are comprised of
      // the 'name' property of each checked check-box:
      return this.name;

    // we convert the map() into an Array, using get():
    }).get()

    // and join the Array elements together with the
    // supplied String, and finished with a period:
    .join(', ') + '.';
  });
});