2014-09-22 28 views
0

我添加使用這樣的「變化」方法的類:復位形式,那並不觸發變化爲複選框 - jquery的

$('.fitCheck').on('change', function() { 
    label = $(this).parent(); 
    if($(this).is(':checked')){ 
     label.addClass('checkedClass'); 
    } else { 
     label.removeClass('checkedClass'); 
    } 
}); 

我也有一個復位輸入按鈕,當表單被重置,並且複選框已被更改,我的腳本無法運行。

感謝您的幫助

**添加的HTML ON REQUEST **

<form id="addItemForm" action="addItem.php" method="post"> 
    <div class="formWrap"> 
     <?php if($error)echo '<div class="errorMessage">'.$error.'</div>' ?> 
     <h5> Title </h5> 
      <input class="title" name="title" type="text"></input> 
     <h5> Fits </h5> 
      <label for="TX1Checkbox"><input type="checkbox" name="TX1" class="fitCheck" id="TX1Checkbox">TX1</label> 
      <label for="TX2Checkbox"><input type="checkbox" name="TX2" class="fitCheck" id="TX2Checkbox">TX2</label> 
      <label for="TX4Checkbox"><input type="checkbox" name="TX4" class="fitCheck" id="TX4Checkbox">TX4</label> 
      <label for="VITOCheckbox"><input type="checkbox" name="VITO" class="fitCheck" id="VITOCheckbox">VITO</label> 
     <h5 id="priceField" class="message"> Price (ex VAT) </h5> 
      &pound;<input name="priceExVAT" type="text"></input> 
     <h5 class="message"> Image </h5> 
      <input name="image" type="file" accept="image/x-png, image/gif, image/jpeg"></input> 
     <h5> Description </h5> 
      <textarea name="body" type="text"></textarea> 
     <br /> 
     <div class="buttonWrap"> 
      <button class="send positive mail left"> Upload Product </button> 
      <input type="reset" value="Reset" class="negative mail right"> 
      <div class="clear"></div> 
     </div> 
    </div> 
    <input name="doAction" value="1" type="hidden" /> 
</form> 

添加這和它的工作原理:

boxes = $('.fitCheck'); 

$('#addItemForm').on('reset', function() { 
    boxes.each(function() { 
     $this = $(this); 
     boxParent = $this.parent(); 
     (!$this.is(':checked')) ? '' : boxParent.removeClass('checkedClass'); 
    }); 
}); 

本來希望不添加其他處理程序,如果任何建議,都會很棒。

感謝

+0

'label.toggleClass($(this).is(':checked'));' – hsz 2014-09-22 09:35:01

+0

需要您的html和重置腳本 – 2014-09-22 09:42:29

回答

0
$('.fitCheck').on('change', function() { 
    label = $(this).parent(); 
    if($(this).is(':checked')){ 
     label.addClass('checkedClass'); 
    } else { 
     label.removeClass('checkedClass'); 
     label.prop('checked' , false); 
    } 
}); 
0

嘗試在jQuery的準備情況如下分配事件。

$(document).ready(function(){ 
$('.fitCheck').on('change', function() { 
    label = $(this).parent(); 
    if($(this).is(':checked')){ 
     label.addClass('checkedClass'); 
    } else { 
     label.removeClass('checkedClass'); 
    } 
}); 

}); 

建議在就緒()分配事件,所有的DOM元素是可用的。

+0

它已經在ready()函數中,謝謝。到目前爲止還沒有提出任何縮短代碼的方法:/ – 2014-09-22 14:00:50