jQuery：在div中获取选中的复选框值

Question

I got a survey, each possible reply is a checkbox and each question is divided in a div that has an id number. I must to create a function that return which checkbox is selected and return as an int.

<div class="row" id="replies-{{ question.id }}">
   {% for reply in func.replies(question.id) %}
       <div class="col-md-12">
          <div class="btn-group-toggle" data-toggle="buttons" >
             <label class="btn btn-block btn-secondary">
                <input type="checkbox"  autocomplete="off" value="{{ reply.id }}" data-id="{{ reply.id }}" data-question="{{ question.id }}" data-test="{{ question.test }}"> {{ reply.reply }}
             </label>
          </div>
       </div>
   {% endfor %}
</div>

Here is the function i've wrote, but at the time I got "undefined" (I call this function when jquery.steps.js change step.)

function getStepChekboxes(id) {
    var selector = '#replies-' + id + ':checkbox:checked';
    console.log(selector);
    $(selector).each(function() {
        if ($(this).data("question") == id) {
           return $(selector).val()
        }
    });
}

This value will be putted in a json call and send to the server.

I think I'm using the wrong selector cause I get undefined when I select the checkboxes.

Answer 1

$(selector).each(function() { is a new function in itself - when it runs, if you return inside of it, you're returning the value to the jQuery iteration function (which completely ignores the return value), not to your outer getStepCheckboxes .

But you don't need jQuery for this - you can just use vanilla JS.

function getStepChekboxes(id) {
  const selector = '#replies-' + id + ':checkbox:checked';
  const foundElement = [...document.querySelectorAll(selector)]
    .find(element => element.dataset.question === id);
  if (foundElement) return parseInt(foundElement.value, 10);
}

Answer 2

You can use the some function of array on a jquery element to break the loop when it is found. You can also use the filter jquery function https://api.jquery.com/filter/ but it won't stop at the first occurence.

  function getStepChekboxes(id) {
        var selector = '#replies-' + id + ':checkbox:checked';
        console.log(selector);
        var result;
        Array.prototype.some.call($(selector),function(el) {
            if ($(el).data("question") == id) {
               result = el.value
               return true
            }
        });
        return result;
    }

OR

  function getStepChekboxes(id) {
        var selector = '#replies-' + id + ':checkbox:checked';
        console.log(selector);
        return $(selector).filter(function(i,el) {
            return $(el).data("question") == id
        }).val();
    }