To jest mój 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>

To jest mój 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(','));
    });
});

Jak mogę zdefiniować kod Javascript na podstawie tych danych wyjściowych?

Wynik (przykład):

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

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

enter image description here

jsfiddle

1
Negar 3 kwiecień 2020, 11:11

4 odpowiedzi

Najlepsza odpowiedź

Coś takiego?

$(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>
0
Kenny 3 kwiecień 2020, 08:23

Możesz użyć słowa kluczowego this, aby uzyskać dostęp do wybranej wartości:

Zamiast korzystać z on zdarzenia kliknięcia live() i na żywo ( ) został usunięty i powinien zostać zastąpiony przez on(...).

Live () API zostało usunięte w jQuery 1.9; użyj zamiast tego on ().

$(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>
0
Manjuboyz 3 kwiecień 2020, 08:35
$(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>
0
Majed Badawi 3 kwiecień 2020, 08:20

Aby to osiągnąć, możesz zaktualizować metodę each(), na przykład:

$('input.eret[type="checkbox"]:checked').each(function(index, elem) {
   checkboxValues.push('Color:"' + $(elem).val() + '"');
});

PRÓBNY:

$('#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(','));
});
#debugOutput {padding:10px 0;}
<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>
0
palaѕн 3 kwiecień 2020, 08:15