Wie erhalte ich alle IDs einer Checkbox, die sich im Fieldset-Element befinden?

Question

Wie erhalten Sie alle IDs von CheckBoxes innerhalb eines Fieldset Elements mit jQuery?

Unten ist das, was ich bisher versucht ..

jQuery:

$(document).on("click", "a[id$='btnShowRates']", function (e) { 
    //for selecting checkboxes when page loads first time 
    var everyChildcb = document.querySelectorAll('[id$=listRateCats] input[type=checkbox]'); 

    //I also tried like below but not working 

    //var everyChildcb = document.querySelectorAll("#listRates"); 
}); 

HTML-Code: HTML-Code ein fieldset Element im Innern enthält es mehr CheckBoxes kann gesehen werden unter HTML-Schnipsel ..

<fieldset data-role="controlgroup" id="listRates" data-icon="false" runat="server"> 
    <div style='position:relative;'> 
    <input type='checkbox' id='1' data-display-name='Rack/General' /> 
    <label for='1'>Rack/General</label> 
    <img id='img_1' class='checkboxFixIconLeft' /> 
    </div> 
    <div style='position:relative;'> 
    <input type='checkbox' id='4' data-display-name='Government' /> 
    <label for='4'>Government</label> 
    <img id='img_4' class='checkboxFixIconLeft' /> 
    </div> 
    <div style='position:relative;'> 
    <input type='checkbox' id='6' data-display-name='Package' /> 
    <label for='6'>Package</label> 
    <img id='img_6' class='checkboxFixIconLeft' /> 
    </div> 
    <div style='position:relative;'> 
    <input type='checkbox' id='3' data-display-name='Family' /> 
    <label for='3'>Family</label> 
    <img id='img_3' class='checkboxFixIconLeft' /> 
    </div> 
</fieldset> 

Schätzen Sie jede Hilfe und Vorschläge, Danke!

Answer 1

Sie können die Funktion map() verwenden, um die IDs als Array zu erhalten.

var ids = $("fieldset :checkbox").map(function() { 
    return this.id; 
}).get(); 
console.log(ids) 

Oder Sie können nur die Kontrollkästchen durchlaufen, um die IDs zu erhalten. Zum Schleifen können Sie .each() verwenden. In der Schleife Kontext können Sie this.id verwenden, um die ID der aktuellen geschleift Checkbox

$("fieldset :checkbox").each(function() { 
    console.log(this.id); 
}); 

Fiddle

Answer 2

$('#listRates').find('input:checkbox').each(function(){ 
 
alert($(this).attr('id'))//get each checkbox id 
 

 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<fieldset data-role="controlgroup" id="listRates" data-icon="false" runat="server"> 
 

 
    <div style='position:relative;'> 
 
    <input type='checkbox' id='1' data-display-name='Rack/General' /> 
 
    <label for='1'>Rack/General</label> 
 
    <img id='img_1' class='checkboxFixIconLeft' /> 
 
    </div> 
 
    <div style='position:relative;'> 
 
    <input type='checkbox' id='4' data-display-name='Government' /> 
 
    <label for='4'>Government</label> 
 
    <img id='img_4' class='checkboxFixIconLeft' /> 
 
    </div> 
 
    <div style='position:relative;'> 
 
    <input type='checkbox' id='6' data-display-name='Package' /> 
 
    <label for='6'>Package</label> 
 
    <img id='img_6' class='checkboxFixIconLeft' /> 
 
    </div> 
 
    <div style='position:relative;'> 
 
    <input type='checkbox' id='3' data-display-name='Family' /> 
 
    <label for='3'>Family</label> 
 
    <img id='img_3' class='checkboxFixIconLeft' /> 
 
    </div> 
 

 
</fieldset> 
 
► Run code snippet

Verwenden Sie .each()