選中時顯示復選框名稱

Question

我試圖植入一個功能以在選中它們時顯示復選框的名稱（而非值）。 我在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> 

過濾器顯示為

<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：有沒有辦法在名稱之間植入一個用於“取消選擇”的十字架？

謝謝你的幫助 ！

對不起，我英語不好，我是法語...

Answer 1

我建議：

// 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提琴手 。

參考文獻：

• CSS：
  • 屬性選擇器 。
• JavaScript：
  • Array.prototype.join() 。
• jQuery的：
  • filter() 。
  • get() 。
  • map() 。
  • on() 。
  • text() 。