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()设置value。

所以将其改为

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

Answer 2

在点击的复选框中，找到最接近的payWeek，然后选择之前的所有payWeeks，找到payWeeks内的所有输入并将值设置为零：

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

        }
    });     
});

Answer 3

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

    var $this = $(this),
        $parent = $(this).parents('.returns').eq(0),
        $inputs = $parent.find('input');

    if ($this.prop("checked")){
        $inputs.val('0');
    } 
});

jquery将以前的输入设置为0

3 个答案: