Как получить все записи, которые уже проверены в jquery

Question

Я использую фильтр, чтобы получить элементы, которые отмечены флажком, но он возвращает только текущее проверенное значение в раскрывающемся списке, не извлекая значения, уже проверенные в раскрывающемся списке

Выпадающий шаблон Kendo для создания флажка

.Template("<input type='checkbox' name='Chkfield' class='clsfield' )

Html

<div id="div" class="fieldBlock">
 <div id="ddl1" style="margin-left: 0px; display: none;" class="fieldBlock float-left">
 <input type="text" id="hdnfld" style="display: none;" value='' />
</div>

Jquery

var values = $(".Chkfield").filter(":checked");
var list = [];
for (var i = 0; i < values .length; i++) {
      finalselection+= values [i].nextSibling.wholeText + ",";
      list.push(values [i].value);
}

Answer 1

Вы можете посмотреть на проверенный селектор jquery.

: CheckedSelector Jquery

Описание: Соответствует всем проверенным элементам или выбранный.

ниже фрагмента имеет простую структуру Html и надеемся, что вы можете сопоставить его с вашим, потому что формат html не упоминается в вопросе.

// find elements
var button = $("button")

// handle click and add class
button.on("click", function(){
debugger
  $(".Chkfield:checked").each(function () {
            alert("Id: " + $(this).attr("id") + " Value: " + $(this).val());
        });
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="banner-message">
  <p>Hello CheckBoxes</p>
    <input  type="checkbox" id="vehicle1" name="vehicle1" value="Bike" class="Chkfield">
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car"  class="Chkfield">
  <input  type="checkbox" id="vehicle3" name="vehicle3" value="Boat" class="Chkfield">
  <br>
  
  <button>Change color</button>
</div>