Question

我正在使用icheck.js来制作精美的单选按钮和复选框。当我现在使用它时，它打破了我的形式以前的工作方式。我有一个复选框，当选中它应该显示一个表格，但现在当我检查它没有发生任何事情。（也许是因为没有选择实际的复选框）

选中复选框时显示表单的任何帮助都将非常感谢！

<div class="row">
    <div class="col-lg-12">
        <div class="form-group i-checks">
            <input type="checkbox" name="anotherSeller1" id="anotherSeller1" onchange="valueChanged1()" />
            <em>Check this box if there is another seller.</em>
        </div>
    </div>
</div>

<div name="Form2" id="Form2" style="display: none;">
test
</div>

JS

jQuery('input').iCheck({
  checkboxClass: 'icheckbox_square-blue',
  radioClass: 'iradio_square-blue',
  increaseArea: '20%' // optional
});


function valueChanged1()
{
    if($('#anotherSeller1').is(":checked"))   
        $("#Form2").show();
    else
        $("#Form2").hide();
        $("#Form2 > .clearfix input:text").val("");
        $("#Form2 > select").val("");
        $("#anotherSeller2").prop("checked", false);
        $("#Form3").hide();
        $("#Form3 > .clearfix input:text").val("");
        $("#Form3 > select").val("");
        $("#anotherSeller3").prop("checked", false);
        $("#Form4").hide();
        $("#Form4 > .clearfix input:text").val("");
        $("#Form4 > select").val("");
        $("#anotherSeller4").prop("checked", false);
        $("#Form5").hide();
        $("#Form5 > .clearfix input:text").val("");
        $("#Form5 > select").val("");

}

Answer 1

看起来这个插件实际上没有选中/取消选中复选框，它只是保持自己的状态。那真不幸。要解决此问题，请使用它们提供的事件：

jQuery('input').iCheck({
  checkboxClass: 'icheckbox_square-blue',
  radioClass: 'iradio_square-blue',
  increaseArea: '20%' // optional
}).on('ifChanged', valueChanged1);

将事件处理程序添加到最后使其工作。或者，不要使用插件，只使用CSS自己设置样式。

注意：我还会为<em>换出<label>，如果整行都处于有效状态，则可以更轻松地点击复选框。

使用icheck，js选中复选框时显示表单

1 个答案: