jQuery - 一种形式影响其他

Question

我有一个具有多种形式的页面（所有表单都有相同的类，只有唯一的ID）。该表格具有可供人们输入开始和结束工作日期的功能。还有一个“我目前在这里工作”的复选框，如果选中此项，则结束工作日期输入字段将替换为单词“present”。

点击/切换复选框对每个单独的表单都可以正常工作。问题是，当一个表单中的复选框被预先检查时，即使没有选中相应表单中的复选框，所有其他表单也会有“存在”字样。

这里是我的jQuery代码：

$(document).ready(function() { 
    if ($('.checkbox-present').length) { 
     var presentCheckBox = $('.checkbox-present'); 
     var endYear = $(presentCheckBox).parents('.checkbox-parent').find('.position-end'); 
     if ($(presentCheckBox, endYear).is(':checked')) { 
      $('.form-group', endYear).hide(); 
      $(endYear).append('<p class="position-present">Present</p>'); 
     } 
    } else { 
     $('.position-present', endYear).remove(); 
     $('.form-group', endYear).show(); 
    } 
}); 

$('.checkbox-present').change(function() { 
    var endYear = $(this).parents('.checkbox-parent').find('.position-end'); 
    if ($(this).is(':checked')) { 
     $('.form-group', endYear).hide(); 
     $(endYear).append('<p class="position-present">Present</p>') 
    } else { 
     $('.position-present', endYear).remove(); 
     $('.form-group', endYear).show(); 
    } 
}); 

Fiddle here to properly see the effect.

你可以从小提琴看到，表2有词“本”，即使其复选框处于未选中状态。我确定这是因为Form 1中的复选框。

如何解决此问题？我仍然在寻找jQuery的方式，所以我不知道如何解决这个问题，但我认为它与绑定有关？

Answer 1

的问题是要检查的检查条件的方式，如果有任何复选框被选中，将其全部选中

$(document).ready(function() { 
    if ($('.checkbox-present').length) { 
     var presentCheckBox = $('.checkbox-present:checked'); 
     if (presentCheckBox.length) { 
      var endYear = $(presentCheckBox).parents('.checkbox-parent').find('.position-end'); 
      $('.form-group', endYear).hide(); 
      $(endYear).append('<p class="position-present">Present</p>'); 
     } 
    } else { 
     $('.position-present', endYear).remove(); 
     $('.form-group', endYear).show(); 
    } 
}); 

演示：Fiddle

---

但是，相反的重复逻辑再次你可以

$(document).ready(function() { 
 
    $('.checkbox-present').change(function() { 
 
    var endYear = $(this).closest('.checkbox-parent').find('.position-end'); 
 
    if (this.checked) { 
 
     $('.form-group', endYear).hide(); 
 
     $(endYear).append('<p class="position-present">Present</p>') 
 
    } else { 
 
     $('.position-present', endYear).remove(); 
 
     $('.form-group', endYear).show(); 
 
    } 
 
    }).filter(':checked').change(); 
 
});

section { 
 
    margin-bottom: 2em; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section class="clearfix"> 
 

 
    <h3>FORM 1</h3> 
 

 
    <div class="form-group"> 
 
    <label class="col-sm-3 control-label">Time Period</label> 
 
    <div class="col-sm-9 checkbox-parent"> 
 
     <div class="col-xs-12"> 
 
     <input type="checkbox" class="checkbox-present" checked/> 
 
     <label for="work-1">I currently work here</label> 
 
     </div> 
 
     <div class="position-start col-xs-4"> 
 
     <div class="form-group"> 
 
      <select class="form-control"> 
 
      <option>Jan</option> 
 
      <option>Feb</option> 
 
      <option>Mar</option> 
 
      <option>Apr</option> 
 
      <option>May</option> 
 
      </select> 
 
     </div> 
 
     <div class="form-group"> 
 
      <select class="form-control"> 
 
      <option>2011</option> 
 
      <option>2012</option> 
 
      <option>2013</option> 
 
      <option>2014</option> 
 
      <option>2015</option> 
 
      </select> 
 
     </div> 
 
     </div> 
 
     <div class="col-xs-2"> 
 
     <p>to</p> 
 
     </div> 
 
     <div class="col-xs-4 position-end"> 
 
     <div class="form-group"> 
 
      <select class="form-control"> 
 
      <option>Jan</option> 
 
      <option>Feb</option> 
 
      <option>Mar</option> 
 
      <option>Apr</option> 
 
      <option>May</option> 
 
      </select> 
 
     </div> 
 
     <div class="form-group"> 
 
      <select class="form-control"> 
 
      <option>2011</option> 
 
      <option>2012</option> 
 
      <option>2013</option> 
 
      <option>2014</option> 
 
      <option>2015</option> 
 
      </select> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</section> 
 
<section class="clearfix"> 
 
    <h3>FORM 2</h3> 
 

 
    <div class="form-group"> 
 
    <label class="col-sm-3 control-label">Time Period</label> 
 
    <div class="col-sm-9 checkbox-parent"> 
 
     <div class="col-xs-12"> 
 
     <input type="checkbox" class="checkbox-present" /> 
 
     <label for="work-2">I currently work here</label> 
 
     </div> 
 
     <div class="position-start col-xs-4"> 
 
     <div class="form-group"> 
 
      <select class="form-control"> 
 
      <option>Jan</option> 
 
      <option>Feb</option> 
 
      <option>Mar</option> 
 
      <option>Apr</option> 
 
      <option>May</option> 
 
      </select> 
 
     </div> 
 
     <div class="form-group"> 
 
      <select class="form-control"> 
 
      <option>2011</option> 
 
      <option>2012</option> 
 
      <option>2013</option> 
 
      <option>2014</option> 
 
      <option>2015</option> 
 
      </select> 
 
     </div> 
 
     </div> 
 
     <div class="col-xs-2"> 
 
     <p>to</p> 
 
     </div> 
 
     <div class="position-end col-xs-4"> 
 
     <div class="form-group"> 
 
      <select class="form-control"> 
 
      <option>Jan</option> 
 
      <option>Feb</option> 
 
      <option>Mar</option> 
 
      <option>Apr</option> 
 
      <option>May</option> 
 
      </select> 
 
     </div> 
 
     <div class="form-group"> 
 
      <select class="form-control"> 
 
      <option>2011</option> 
 
      <option>2012</option> 
 
      <option>2013</option> 
 
      <option>2014</option> 
 
      <option>2015</option> 
 
      </select> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</section>