Question

我正在使用'change'方法添加一个类，如下所示：

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

我还有一个重置输入按钮，当重置表单时，复选框已经更改，上面的脚本不会运行。

感谢您的帮助

**请求添加HTML **

<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');
    });
});

本来希望不添加其他处理程序，如果有任何建议，那就太棒了。

由于

Answer 1

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

Answer 2

尝试在jquery ready事件中分配事件，如下所示。

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

});

建议在 ready（）分配事件，因为所有DOM元素都可用。

重置表单，不会触发复选框的更改 - jquery

2 个答案: