Jquery - 如何检查所有复选框是否未选中?

时间:2013-08-26 19:43:46

标签: php javascript jquery checkbox smarty

由于某些原因,我的代码不起作用?!我需要检查复选框,如果所有都是“未选中”,则启用隐藏字段并将值发送到db,这样我就可以确定复选框未选中。

问题1:为什么我的jquery代码不起作用?

问题2:我需要将已检查或未检查的值记录到DB。我的计划是检查是否在php中没有选中。这是一个好习惯吗?

HTML

<tr class="more_info">
        <th valign="top">Other options:</th>
        {foreach from=$HTML_cOPTIONS key=dbname item=optname}
            {if ! empty($CARINFO[car].{$dbname})}
                <td><input type="checkbox" id="forced_checkbox" name="c_options[]" value="{$dbname}" checked/> {$optname} </br></td>
            {else}
                <td><input type="checkbox" id="forced_checkbox" name="c_options[]" value="{$dbname}"/> {$optname} </br></td>
            {/if}
        {/foreach}
        <input type="hidden" id="forceSendCheckBox" name="c_options[]" value="nocheckboxes"/>
        <input type="button" value="Check" id="check" />
    </tr>

Jquery的

$('#check').bind('click',function()
{
    if ($('#forced_checkbox').filter(':not(:checked)').length == 0) {
        console.log('at least one checked');
        $("#forceSendCheckBox").prop('disabled',true);//do not send this field to DB
    } else {
        console.log('nothing checked');
        $("#forceSendCheckBox").prop('disabled',false);//send empty checkboxes
    }
});

更新

这是一个小提琴,它似乎仍然被打破。 : - /

http://jsfiddle.net/L5J96/

2 个答案:

答案 0 :(得分:9)

ID必须是唯一的。改为使用一个类。

你的小提琴你有几个问题。首先,您忘记从菜单中选择jQuery框架,因此没有任何jQuery代码可以工作。其次,您将过滤器从not(:checked)更改为(:checked),但未将== 0更改为> 0。第三,没有not,你不应该在过滤器选择器周围加上括号。第四,您尝试使用.text()在输入字段中显示消息,但正确的方法是.val()

以下是更正后的代码:

$('#check').on('click', function () {
    if ($('.forced_checkbox').filter(':checked').length > 0) {
        $('#forceSendCheckBox').val('at least one checked');
    } else {
        $('#forceSendCheckBox').val('nothing checked');
    }
});

FIDDLE

答案 1 :(得分:1)

正如Barmar所说,ID必须是唯一的。

接下来,使用.on()代替.bind() - 类似语法,这很容易做到。 (.bind已弃用)

但是,要回答您的问题,您可以通过选择所有未选中的复选框并迭代它们来快速找到未选中的复选框。

如果您需要创建一个未选中复选框的列表,那么每个人都需要一些独特的东西(如果房间里的每个人都被命名为'Bob',那么制作所有棕色头发男人的有用列表将会很难)。使用ID attr,如底部的jsFiddle示例。

$("input:checkbox:not(:checked)").each(function() {
    alert($(this).attr('id')); 
});

jsFiddle here

Here is an expanded jsFiddle example演示如何按照帖子中的要求将未选中的复选框列表保存到隐藏字段中。


关于你的jsFiddle,需要调整以下内容:

See revised jsFiddle

  1. 使用.on()语法。请改用.on(document).on(body)

    $('document').on('action', '#elementID', function() { //Do stuff here });

  2. 为了对未经检查的对象进行交互,您应该使用jQuery的.each()方法。

    $('.forced_checkbox').filter(':not(:checked)').each(function() { //Do stuff });

  3. 希望这有帮助。