在具有类检查的div中的jquery目标输入值

Question

I am foreaching a number of suppliers in a quotation form, each with a checkbox element to tick which should be contacted. suppliers are in divs with class names supplier-checkbox, moreover upon selecting supplier the supplier-checkbox div gets appended with "checkedsupplier" or "uncheckedsupplier" class name.

<div class="supplier-checkbox checkedsupplier">

<input type="hidden" name="supplier-email" class="supplieremail" value="{$item->email}" />
                                    </div> <!--end supplier checkbox-->

foreach supplier div I get a hidden input field within the div holding the supplier email as its value. idea is that upon submitting form I'd check for all div's with "checkedsupplier" class name and for each obtain the value of the input inside of it, hold all values in onelong variable and echo it into the To field of the email to replicate the quotation form to each supplier.

using jquery, I managed to toggle the class name and a background effect showing ticked or unticked with the below.

<script> 
    $(".supplier-checkbox").click(function(){
    $(this).toggleClass('checkedsupplier uncheckedsupplier')
    //$(this).children( ".supplieremail" ).attr("checked")
});
</script>

can anyone give me any pointers on how to foreach by class name and fetch value of each input inside every div with that class name using jquery. Im working on it and yet found the .each for looping .val for values and if (bar) for conditional. but am not yet experienced enough to put things together. have been working as a junior developer for 7 months now since graduating in networking which is a completely different field.

in the app.js file I'm obtaining the form values this way: `

v_country:$('#country').val(),
v_quotationtel:$('#quotationtel').val(),
                v_mobile:$('#mobile').val(),
                v_quotationemail:$('#quotationemail').val(),
                v_quotemefor:$('#quotemefor').val(),
    v_quotemessage:$('#quotemessage').val()
                //this line is what i'm trying to do to get input values and store them in one var to pass them to php form that sends email $( "checksupplier" ).each(function( i ) {

         }`

thanks everyone on stack! I believe in you guys here you've all helped me throughout my studies and work.

Ian

** Update ** It's been modified to work as follows:

 <script>
        $(function(){
            $( ".crew-member-con" ).click(function(){
                $(this).toggleClass('whitebg greybg');
                $(this).toggleClass('crew-checked crew-unchecked');
                $(this).toggleClass('grey white');
                if($(this).children('input').prop('checked') == true){
                    $(this).children('input').prop('checked', false);
                }else{
                    $(this).children('input').prop('checked', true);
                }

                var selectedMembers='';
                $('.selected-members').each(function(){
                    if($(this).is(':checked')){
                        selectedMembers +=$(this).val()+', ';
                    }
                   //alert(emails);
                });
                if(selectedMembers != ''){
                    selectedMembers = selectedMembers.slice(0,-2);
                }
                $('#exam-member span').html(selectedMembers);
                console.log(selectedMembers);
});         

        });

Answer 1

<script> 
$(".supplier-checkbox").click(function(){
$(this).toggleClass('checkedsupplier uncheckedsupplier')
//$(this).children( ".supplieremail" ).attr("checked")
var emails='';
$('.supplieremail').each(function(){
   emails +=$(this).val();
});

$('#mailfieldstextarea').val(emails);
});
</script>

I hope this will help.