使用 icheck,js 选择复选框时显示表单
Show form when checkbox is selected using icheck,js
我正在使用 icheck.js 来制作精美的单选按钮和复选框。当我现在使用它们时,它打破了我的表单过去的工作方式。我有一个复选框,当检查时,它应该显示一个表格,但是现在,当我检查它时,什么也不会发生。 (可能是因为它自己的实际复选框没有被选中)
http://jsfiddle.net/75qmj037/6/
在选中复选框时显示我的表单的任何帮助将不胜感激!
<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("");
}
看起来这个插件实际上 check/uncheck 复选框,它只是保持自己的状态。那真不幸。要解决此问题,请使用他们提供的事件:
jQuery('input').iCheck({
checkboxClass: 'icheckbox_square-blue',
radioClass: 'iradio_square-blue',
increaseArea: '20%' // optional
}).on('ifChanged', valueChanged1);
将事件处理程序添加到末尾使其工作。或者,不要使用该插件,只需使用 CSS.
自己设置样式即可
注意:我还会将 <em>
换成 <label>
,如果整行都处于活动状态,则单击复选框会更容易。
我正在使用 icheck.js 来制作精美的单选按钮和复选框。当我现在使用它们时,它打破了我的表单过去的工作方式。我有一个复选框,当检查时,它应该显示一个表格,但是现在,当我检查它时,什么也不会发生。 (可能是因为它自己的实际复选框没有被选中)
http://jsfiddle.net/75qmj037/6/
在选中复选框时显示我的表单的任何帮助将不胜感激!
<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("");
}
看起来这个插件实际上 check/uncheck 复选框,它只是保持自己的状态。那真不幸。要解决此问题,请使用他们提供的事件:
jQuery('input').iCheck({
checkboxClass: 'icheckbox_square-blue',
radioClass: 'iradio_square-blue',
increaseArea: '20%' // optional
}).on('ifChanged', valueChanged1);
将事件处理程序添加到末尾使其工作。或者,不要使用该插件,只需使用 CSS.
自己设置样式即可注意:我还会将 <em>
换成 <label>
,如果整行都处于活动状态,则单击复选框会更容易。