Change text input value based on check box, multiple fields with same class name

Question

I have many checkboxes with same class name and below each there is a hidden date field.

I need to show the div with the date field and select different date. in the begging I need to add 30 days from today when the checkbox is checked by default, then the user can change the date.

When I click to first choice and change the date is ok....but when I click to another the first date field takes the default value. Any suggestions?

html

 @foreach (var item in Model)
        {
            <tr>

                <td>
                    <div>
                        @Html.CheckBox(item.Title, new { @class = "chkPages", Value = item.ID }) @item.Title
                    </div>
                    <div class="extrafields">
                        <div class="DurationDisplayDate">
                            <input name="DurationDisplayDate" class="DurationDisplayDate" />
                        </div>
                    </div>
                </td>

        </tr>

-----------------------------

   $('.chkPages').change(function () {
        
        if (this.checked)
        {
            var dateStr = new Date();
            dateStr.setDate(dateStr.getDate() + 30)
            dateStr = dateStr.getDate() + "/" + (dateStr.getMonth() + 1) + "/" + 
            dateStr.getFullYear();
           
            $(this).closest('div').next('.extrafields').fadeIn('slow');
           //How can I change the next input field?
            $(".DurationDate").val(dateStr);
        }

        else {
            dateStr = "";
            $(this).closest('div').next('.extrafields').fadeOut('slow');
            $(".DurationDate").val(dateStr);
        }

Answer 1

The main problems here are:

• You are using "DurationDate" when the class is called "DurationDisplayDate"
• You are selecting all elements with that class instead of just the relevant one in that row

An easy solution to this is to reuse the code you already have that's selecting the extras container for animation to find the relevant input e.g.

const extras = $(this).closest('div').next('.extrafields')
extras.find('.DurationDisplayDate').val(dateStr)
extras.fadeIn('slow')

Full working example:

$(document).ready(function() {
  $('.chkPages').change(function() {
    if (this.checked) {
      var dateStr = new Date()
      dateStr.setDate(dateStr.getDate() + 30)
      dateStr = `${dateStr.getDate()}/${dateStr.getMonth() + 1}/${dateStr.getFullYear()}`
      
      const extras = $(this).closest('div').next('.extrafields')
      extras.find('.DurationDisplayDate').val(dateStr)
      extras.fadeIn('slow')
    } else {
      const extras = $(this).closest('div').next('.extrafields')
      extras.find('.DurationDisplayDate').val('')
      extras.fadeOut('slow')
    }
  })
})

.extrafields {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <div>
        <input type="checkbox" class="chkPages" />
      </div>
      <div class="extrafields">
        <div class="DurationDisplayDate">
          <input name="DurationDisplayDate" class="DurationDisplayDate" />
        </div>
      </div>
    </td>
  </tr>
  <tr>
    <td>
      <div>
        <input type="checkbox" class="chkPages" />
      </div>
      <div class="extrafields">
        <div class="DurationDisplayDate">
          <input name="DurationDisplayDate" class="DurationDisplayDate" />
        </div>
      </div>
    </td>
  </tr>
  <tr>
    <td>
      <div>
        <input type="checkbox" class="chkPages" />
      </div>
      <div class="extrafields">
        <div class="DurationDisplayDate">
          <input name="DurationDisplayDate" class="DurationDisplayDate" />
        </div>
      </div>
    </td>
  </tr>
</table>