javascript - jquery 将先前的输入设置为 0

Question

我在 5 个输入和一个下拉列表的末尾有一个复选框。我正在尝试通过 jquery 将复选框之前的所有输入和下拉列表设置为 0。

将会列出许多员工，因此只能是复选框之前的员工。

我对 jquery 的无力尝试。我有 .on 因为有时它会通过 ajax 调用

$(document).ready(function () {

    $(document).on('click', '.fasCheck', function(){

    if ($(this).attr("checked") == "checked"){
        $(this).prev().parent().prev(".payWeek").next('input').prop('checked', true);;
    } else {

    }
    });     

});

HTML:

<div class="returns" id="employee">
<h3>David Wilson</h3>
<div class="payWeek">
        <label for="MonthlyReturn0PayWeek1">Pay Week1</label>
        <input type="number" id="MonthlyReturn0PayWeek1" value="" maxlength="12" step="any" name="data[MonthlyReturn][0][pay_week1]">
    </div>
   <div class="payWeek">
        <label for="MonthlyReturn0PayWeek2">Pay Week2</label>
        <input type="number" id="MonthlyReturn0PayWeek2" value="" maxlength="12" step="any" name="data[MonthlyReturn][0][pay_week2]">
   </div>
   <div class="payWeek">
        <label for="MonthlyReturn0PayWeek3">Pay Week3</label>
        <input type="number" id="MonthlyReturn0PayWeek3" value="" maxlength="12" step="any" name="data[MonthlyReturn][0][pay_week3]">
   </div>
   <div class="payWeek">
        <label for="MonthlyReturn0PayWeek4">Pay Week4</label>
        <input type="number" id="MonthlyReturn0PayWeek4" value="" maxlength="12" step="any" name="data[MonthlyReturn][0][pay_week4]">
    </div>
    <div class="payWeek">
         <label for="MonthlyReturn0PayWeek5">Pay Week5</label>
         <input type="number" id="MonthlyReturn0PayWeek5" value="" maxlength="12" step="any" name="data[MonthlyReturn][0][pay_week5]">
     </div>
     <div class="payWeek">
          <label for="MonthlyReturn0PayWeeks">Pay Weeks</label>
          <select id="MonthlyReturn0PayWeeks" name="data[MonthlyReturn][0][pay_weeks]">
                <option value="0">0</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option selected="selected" value="4">4</option>
                <option value="5">5</option>
           </select>
      </div>                        
      <div class="payWeek">
           <label for="FAS">FAS</label>
           <input type="checkbox" class="fasCheck" name="FAS">
      </div>
</div>

Answer 1

• $(this).attr("checked") == "checked" 不起作用，您已经知道如何使用 .prop()。或者只使用 this.cecked 而不使用任何 jQuery。
• .prev().parent() - prev 绝对不必要，所有兄弟节点都有相同的父节点。
• .prev(".payWeek") - 似乎您想使用 .prevAll()相反。
• .next('input') - 您不想找到下一个兄弟，而是找到后代。使用.children()或.find() .
• .prop('checked') - 虽然适用于复选框，但您在此处有数字输入，需要通过 .val() 设置其值 .

所以将其更改为

$(document).ready(function() {
    $(document).on('click', '.fasCheck', function() {
        if (this.checked) {
            $(this)
              .parent()
              .prevAll(".payWeek")
              .find('input')
              .val('0');
        }
    });     
});