当选中两个复选框中的至少一个时,我试图显示或隐藏按钮,我尝试使用jQuery,但它不起作用。有人能帮我吗,或者展示一些我可以使用的例子吗?
这是我的代码:
<input type="checkbox" id="p1_perro" class="checks" name="p1[]" value="p1_perro" />
<label>Perro</label><br />
<input type="checkbox" id="p1_gato" class="checks" name="p1[]" value="p1_gato" />
<label>Gato</label><br />
<input type="checkbox" id="p1_pajaro" name="p1[]" value="p1_pajaro" />
<label>Pájaro</label><br />
<input type="checkbox" id="p1_roedor" name="p1[]" value="p1_roedor" />
<label>Roedor</label><br />
if ($('.checks').find('input:checked').length < 0) {
$("#btnSiguiente1").hide();
$("#enviar").show();
}
else {
$("#btnSiguiente1").show();
$("#enviar").hide();
}
您不应该使用.find(),它会查找子元素
if($('.checks:checked').length == 0){
$("#btnSiguiente1").hide();
$("#enviar").show();
}else{
$("#btnSiguiente1").show();
$("#enviar").hide();
}
或使用过滤器
if($('.checks').filter('input:checked').length == 0){
$("#btnSiguiente1").hide();
$("#enviar").show();
}else{
$("#btnSiguiente1").show();
$("#enviar").hide();
}
注意:这必须在类似的.checks
的更改处理程序中执行
var $checks = $('.checks').change(function () {
var flag = $checks.filter(':checked').length == 0;
$("#btnSiguiente1").toggle(!flag);
$("#enviar").toggle(flag);
})
演示:Fiddle
检查项的数量永远不能小于零,因此if
语句逻辑在这方面存在缺陷。此外,选择器正在查找作为.checks
的子级的input
,这是不正确的。试试这个:
if ($('.checks:checked').length == 0){
$("#btnSiguiente1").hide();
$("#enviar").show();
}
else {
$("#btnSiguiente1").show();
$("#enviar").hide();
}
fiddle Demo
var checks = $('.checks'),
enviar = $("#enviar"),
btnSiguiente1 = $("#btnSiguiente1");
btnSiguiente1.add(enviar).hide();
checks.change(function () {
if (checks.filter(':checked').length) {
btnSiguiente1.hide();
enviar.show();
} else {
btnSiguiente1.show();
enviar.hide();
}
});