Set value of input element on specific class of parent element

Question

I want to set values to a hidden input field, depending on the classes added to the parent element on document.ready. I have the following PHP and jQuery code in my files:

<?php
foreach($attributeOptions as $value) { ?>
    <div id="js-button" class="jarsettings-button <?php checkIfSelected($value['value'], $_settings) ?>">
        <?= $value['label']; ?>
        <input type="hidden" value="" id="cb-<?= $value['value']; ?>" name="js-cb" />
    </div>
    <?php } ?>

What happens here is that the script checks in a former declared function wheter the class that has to been added to the element trought checkIfSelected() is either active or inactive. It will be "active" if the database tells us that this specific element has to be active on page load, and if not vice versa.

My jQuery looks like this:

<script type="text/javascript">
    jQuery(document).ready(function($){

            if( jQuery('#js-button').hasClass('active') ) {
                jQuery(this).find('input').val('1');
            } else if ( jQuery('#js-button').hasClass('inactive') ){
                        jQuery(this).find('input').val('0');
            }

        jQuery('.jarsettings-button').click(function(){             
            jQuery(this).fadeToggle(150).toggleClass('active');
            jQuery(this).fadeToggle(150).toggleClass('inactive');

            if( jQuery(this).hasClass('active') ){
                jQuery(this).find('input').val('1');
            } else if ( jQuery(this).hasClass('inactive') ){
                jQuery(this).find('input').val('0');
            }   
        })
    })      
</script>

I want the value of each field either 0 (on former declared inactive class) or 1 (if active class). The check itself works if you click on a element, but I still get only value="1" for all input fields, nevertheless which class has been added. I first tried the class id in jQuery (.jarsetings-button), but it hasn't worked yet. I changed it to the ID, still now functional detection of the value.

What am I doing wrong here?

Thanks in advance!

Answer 1

You can try with following code:

<script type="text/javascript">
jQuery(document).ready(function($){
        jQuery('.jarsettings-button').each(function(){
            var parent = jQuery(this);
            if(  parent.hasClass('active')) {
                jQuery(parent).find('input').val('1');
            } else if ( parent.hasClass('inactive') ){
                jQuery(parent).find('input').val('0');
            }
        });


    jQuery('.jarsettings-button').click(function(){             
        jQuery(this).fadeToggle(150).toggleClass('active');
        jQuery(this).fadeToggle(150).toggleClass('inactive');

        if( jQuery(this).hasClass('active') ){
            jQuery(this).find('input').val('1');
        } else if ( jQuery(this).hasClass('inactive') ){
            jQuery(this).find('input').val('0');
        }   
    })
})      

There was a miss in first if...else part

In case of click part; this reference points to the element on which click action has been performed and hence that part is correct.

Answer 2

The above code will only work for first element since you are duplicating the ids in foreach. So I would say, better, remove that id [or find anyway to dynamically create unique ids] and refer element using class on document.ready as below:

jQuery(document).ready(function($){
   jQuery('.jarsettings-button').each(function(){
         //use ternary operation
         var val=jQuery(this).hasClass('active')?1:0;
         jQuery(this).find('input').val(val);

   });
  //click event here
});