nicolaswecandoit nicolaswecandoit - 2 months ago 6
jQuery Question

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

Answer

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: