文章/答案/技术大牛

发布

社区首页 >问答首页 >选中时显示复选框名称

问选中时显示复选框名称
EN

Stack Overflow用户

提问于 2016-10-02 12:25:28

回答 1查看 930关注 0票数 0

我试图在选中复选框时插入一个函数来显示名称(而不是值)。我是红宝石上的铁路应用程序。

所以我的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>

过滤器显示为

<div id="divfilter"></div>

复选框如下所示

    <input type="checkbox" name="barbecue" id="barbecue" value="oui" class="barbecue" />
<input type="checkbox" name="handicap" id="handicap" value="oui" class="handicap" />
<input type="checkbox" name="animaux" id="animaux" value="oui" class="animaux" />

问题1:当我选择一个有效的复选框时，。但是，如果我选中2复选框，第一个标签名将被新标签替换。我要那两个标签。我怎么能这么做？

问题2:有什么想法来简化和烘干这个吗？

$('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');
                });

问题3 :有主意在名字之间植入一个十字作为"unselect“吗？

谢谢你的帮助！

顺便说一句，对不起，我的英语不好，我是法国人.

javascript

jquery

checkbox

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-10-02 12:45:53

我建议：

// 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(', ') + '.';
  });
});

// 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(', ') + '.';
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="barbecue" id="barbecue" value="oui" class="barbecue" />
<input type="checkbox" name="handicap" id="handicap" value="oui" class="handicap" />
<input type="checkbox" name="animaux" id="animaux" value="oui" class="animaux" />

<div id="divfilter"></div>

JS Fiddle。

参考文献：

CSS：
- 属性选择器。

JavaScript：
- Array.prototype.join()。

jQuery：
- filter()。
- get()。
- map()。
- on()。
- text()。

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/39816975

复制

相似问题

问选中时显示复选框名称
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问选中时显示复选框名称EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问选中时显示复选框名称
EN