CODEWITHSUNDEEP
jquery
Ayesha
Ayesha

Reputation: 51

adding ID of input in the for attribute of label

I am trying to get the ID of the input and add it in the label (for="ID"). Here is the html:

<form>
     <div class="search-row-location search-row-checkbox-multiple">
        <label for="location" class="search-label">Location</label>
        <div class="field">
           <input checked="" name="location[]" id="location_0" value="0" class="input-field=" type="checkbox">
           <label class="search-checkbox-label">All Locations</label>                           
           <input name="location[]" id="location_1" value="1" class="input-field" type="checkbox">
           <label class="search-checkbox-label">Sydney</label> 
           <input name="location[]" id="location_2" value="1" class="input-field" type="checkbox">
           <label class="search-checkbox-label">Paris</label> 
        </div>
    </div>
    <div class="search-row-price search-row-checkbox-multiple">
        <label for="price" class="search-label">Price</label>
        <div class="field">
           <input checked="" name="price[]" id="price_0" value="0" class="input-field=" type="checkbox">
           <label class="search-checkbox-label">All Prices</label>                          
           <input name="price[]" id="price_1" value="1" class="input-field" type="checkbox">
           <label class="search-checkbox-label">100$</label> 
           <input name="price[]" id="price_2" value="1" class="input-field" type="checkbox">
           <label class="search-checkbox-label">200$</label> 
        </div>
    </div>
</form>

I am creating a custom checkbox and hence need the for="" attribute in label. I am using 

jQuery('.search-checkbox-label').attr('for', jQuery( this ).closest('.input-field').attr('id'));

I am getting the id of first input i.e,. location_0 in all the labels. How can I get it working?

Upvotes: 0

Views: 125

Answers (2)

Rohan Kumar
Rohan Kumar

Reputation: 40639

Use prev and each loop to achieve this like,

jQuery('.search-checkbox-label').each(function(){
    jQuery(this).attr('for', jQuery( this ).prev('.input-field').attr('id'));
});

Snippet,

jQuery(function() {
  jQuery('.search-checkbox-label').each(function() {
    jQuery(this).attr('for', jQuery(this).prev('.input-field').attr('id'));
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form>
  <div class="search-row-location search-row-checkbox-multiple">
    <label for="location" class="search-label">Location</label>
    <div class="field">
      <input checked="" name="location[]" id="location_0" value="0" class="input-field=" type="checkbox">
      <label class="search-checkbox-label">All Locations</label>
      <input name="location[]" id="location_1" value="1" class="input-field" type="checkbox">
      <label class="search-checkbox-label">Sydney</label>
      <input name="location[]" id="location_2" value="1" class="input-field" type="checkbox">
      <label class="search-checkbox-label">Paris</label>
    </div>
  </div>
  <div class="search-row-price search-row-checkbox-multiple">
    <label for="price" class="search-label">Price</label>
    <div class="field">
      <input checked="" name="price[]" id="price_0" value="0" class="input-field=" type="checkbox">
      <label class="search-checkbox-label">All Prices</label>
      <input name="price[]" id="price_1" value="1" class="input-field" type="checkbox">
      <label class="search-checkbox-label">100$</label>
      <input name="price[]" id="price_2" value="1" class="input-field" type="checkbox">
      <label class="search-checkbox-label">200$</label>
    </div>
  </div>
</form>

Upvotes: 1

Ayesha
Ayesha

Reputation: 51

jQuery('.search-checkbox-label').each(function() {
   jQuery( this ).attr('for', jQuery( this ).prev('.input-field').attr('id'));
  });

solves the problem

Upvotes: 0

Related Questions