icheck 复选框未取消选中

Question

我有以下表单界面

在这里，我使用了 icheck 复选框。当我手动选中和取消选中该复选框时，它工作正常，因为我编写了以下代码

//if checkbox "Product Feed Url" is unchecked,show the feed textbox
$('#crawlingUrl').on('ifUnchecked', function(event){
    $("#feedUrl").show();
});

//if checkbox of "Product Feed Url" is checked,hide the feed textbox
$('#crawlingUrl').on('ifChecked', function(event){
    $("#feedUrl").hide();
    $("#feedUrl-error").hide();
});

单击取消按钮后，我重置表单元素并将其隐藏并显示商店 div 列表。在取消按钮上，我还尝试使用以下选项取消选中该复选框，但它们都不起作用。

//$("#crawlingUrl").iCheck('uncheck');
//$("#feedDiv").find('#crawlingUrl').iCheck('uncheck');
//$("#feedDiv .clsCheckBox").iCheck('uncheck');
$("input[name=crawlingUrl]").iCheck('uncheck');

当我再次打开表单输入值时，复选框并未取消选中。有人可以告诉我如何解决此问题吗？

检查元素的屏幕截图

Answer 1

我认为你可以混合使用form和 'iCheck checkbox'，我的例子是可以的：

$('input').iCheck({
  // base class added to customized checkboxes
  checkboxClass: 'custom-icheckbox'
});
//if checkbox "Product Feed Url" is unchecked,show the feed textbox
$('#crawlingUrl').on('ifUnchecked', function(event){
    $("#feedUrl").show();
});

//if checkbox of "Product Feed Url" is checked,hide the feed textbox
$('#crawlingUrl').on('ifChecked', function(event){
    $("#feedUrl").hide();
    $("#feedUrl-error").hide();
});
function resetForm(){
$('form')[0].reset();
//$("#crawlingUrl").iCheck('uncheck');
//$("#feedDiv").find('#crawlingUrl').iCheck('uncheck');
//$("#feedDiv .clsCheckBox").iCheck('uncheck');
$("input[name=crawlingUrl]").iCheck('uncheck');
}

.custom-icheckbox {
  height: 20px;
  width: 20px;
  border: 1px solid red;
}
.resetBtn {
border:1px solid gray;
width: 50px;
height: 30px;
}

<script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/icheck.js"></script>
  <input type="checkbox" id="crawlingUrl" name="crawlingUrl" value="enable" />
  <form action="/">
<label for="feedUrl">hint: </label>
<input type="text" id="feedUrl" name="feedUrl"/>
<label id="feedUrl-error" for="feedUrl">Error</label>
<div class="resetBtn" onClick="resetForm()">reset</div>
</form>