Как добавить строку первым и последним в чекбокс jquery

Question

Это мой html:

<input class="eret" type="checkbox" value="Red">Red</input>
<input class="eret" type="checkbox" value="Green">Green</input>
<input class="eret" type="checkbox" value="Blue">Blue</input>
<input class="eret" type="button" value="Get checkboxes" id="getCheckboxesButton"></input>
<div id="debugOutput">
</div>

Это мой javascript:

$(document).ready(function() {
    $('#getCheckboxesButton').live('click', function(event) {
        var checkboxValues = [];
        $('input.eret[type="checkbox"]:checked').each(function(index, elem) {
            checkboxValues.push($(elem).val());
        });
        $('#debugOutput').html(checkboxValues.join(','));
    });
});

Как я могу определить Javascript код с этим выходом?

Выход (пример):

Color:"Green"  --> One : Without Comma

Color:"Green",Color:"Blue" / Color:"Red",Color:"Green",Color:"Blue"  --> Multi : With Comma

jsfiddle

Answer 1

Как то так?

$(document).ready(function() {
    $('#getCheckboxesButton').on('click', function(event) {
        var checkboxValues = [];
        $('input.eret[type="checkbox"]:checked').each(function(index, elem) {
            checkboxValues.push('Color:"'  +  $(elem).val() + '"');
        });
        $('#debugOutput').html(checkboxValues.join(','));
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="eret" type="checkbox" value="Red">Red
<input class="eret" type="checkbox" value="Green">Green
<input class="eret" type="checkbox" value="Blue">Blue
<input class="eret" type="button" value="Get checkboxes" id="getCheckboxesButton">
<div id="debugOutput">
</div>

Answer 2

вы можете использовать ключевое слово this для доступа к выбранному значению:

вместо того, чтобы использовать on событие клика, которое вы использовали live() и Live () , что вы делали был удален и должен быть заменен на on(...).

Live () API был удален в jQuery 1.9; пожалуйста, используйте вместо ().

$(document).ready(function() {
     $('#getCheckboxesButton').on('click', function(event) {
          var checkboxValues = [];
          $('input.eret[type="checkbox"]:checked').each(function(index, elem) {
               checkboxValues.push('Color:"' + $(this).val() + '"');
          });
          $('#debugOutput').html(checkboxValues.join(','));
      });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="eret" type="checkbox" value="Red">Red</input>
<input class="eret" type="checkbox" value="Green">Green</input>
<input class="eret" type="checkbox" value="Blue">Blue</input>
<input class="eret" type="button" value="Get checkboxes" id="getCheckboxesButton"></input>
<div id="debugOutput">
</div>

Answer 3

$(document).ready(function() {
     $('#getCheckboxesButton').on('click', function(event) {
          var checkboxValues = [];
          $('input.eret[type="checkbox"]:checked').each(function(index, elem) {
               checkboxValues.push(`Color:"${$(elem).val()}"`);
          });
          $('#debugOutput').html(checkboxValues.join(','));
      });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="eret" type="checkbox" value="Red">Red</input>
<input class="eret" type="checkbox" value="Green">Green</input>
<input class="eret" type="checkbox" value="Blue">Blue</input>
<input class="eret" type="button" value="Get checkboxes" id="getCheckboxesButton"></input>
<div id="debugOutput"></div>