CODEWITHSUNDEEP
javascriptjquerycheckbox
frontcodelover
frontcodelover

Reputation: 337

Display checkbox name when they are selected

I m trying to implant one function to display name (not value) of checkbox when they are selected. I m on Ruby on Rail app.

So my jquery code is

<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>

Filters are displayed with

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

And checkbox look like this

    <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" />

Question 1 : When i select one checkbox thats works. But if i select 2 checkbox the first label name is replace by the new one. I want those 2 labels. How i can do that ?

Question 2: Any idea to simplified and DRY this ?

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

Question 3 : Any idea to implant a cross for "unselect" between the name ?

Thanks for your help !

By the way sorry for my bad english I m french...

Upvotes: 0

Views: 1114

Answers (1)

David Thomas
David Thomas

Reputation: 253318

I'd suggest:

// 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.

References:

Upvotes: 2

Related Questions