logo标签列表

复选框和JQUERY： "is checked" 总是为 FALSE

jquerycheckbox
20

以下是代码，复选框始终为“FALSE”。 但在页面上却不同。 它无法被选中或取消选中。

<script type="text/javascript">
 $('.cbOzelHastaAdi').unbind('click');

 $('.cbOzelHastaAdi').click( function() {

    var parentDiv = $(this).parent().get(0);
    var cbs = $(parentDiv).find('table input:checkbox');

   if($(this).attr("checked") === "true") {
        cbs.each(function() { $(this).attr('checked', false); });
    }
    else{
        cbs.each(function() { $(this).attr('checked', true); });
    }

})

</script>
你能重新格式化一下吗？这样读起来真的很困难。 - Chris Brandsma
8个回答
39
问题之一是您在包围顶部复选框和标签的 span 上设置了 checked 属性并绑定了事件处理程序到该 span，因此 checked 属性将始终保留在该 span 上。
我已将事件处理程序移到复选框上，并对代码进行了一些整理。虽然我认为在 HTML 元素上构建自己的属性不是问题（例如，在 span 元素上设置 checked 属性，我认为在 XHTML strict 验证时会失败），但我不知道这样做是否被认为是良好的实践。
根据 ID 混淆，我可以看出您正在使用 ASP.NET - 您可以使用服务器端的<%= myControl.ClientID %>获取混淆的 ID 以呈现在发送到客户端的 HTML 中。 工作示例在此处
   $(function() {     
        $('#rptOzel_ctl00_rptOzelHastalar_ctl00_cbOzelKurumHastasi').unbind('click');
        $('#rptOzel_ctl00_rptOzelHastalar_ctl00_cbOzelKurumHastasi').click( function() {

           var cbs = $('table input:checkbox');  

           if($(this).is(':checked')){
               cbs.each(function() { $(this).attr('checked', true); });
           }
           else{
            cbs.each(function() { $(this).attr('checked', false); });
           }

        });
    });

编辑:

针对您的评论，您有几个选项来解决clientid的问题。如果您将jQuery编写在aspx页面中，则可以使用以下代码：

$('#<%= cbOzelKurumHastasi.ClientID %>')

代替

$('#rptOzel_ctl00_rptOzelHastalar_ctl00_cbOzelKurumHastasi')

如果您的jQuery位于外部脚本文件中，则可以将此代码放入aspx页面中。

<script type="text/javascript">
var cbOzelKurumHastasi = '#<%= cbOzelKurumHastasi.ClientID %>';
</script>

然后在你的外部脚本文件中使用这个变量

$(function() {     
            $(cbOzelKurumHastasi).unbind('click');
            $(cbOzelKurumHastasi).click( function() { ...

如需其他选项，请查看此问题和答案：如何阻止ASP.NET更改ID以便使用jQuery

请您在服务器上编写代码。我不知道如何与客户端ID绑定。 您知道如何绑定cssclass属性吗？ - uzay95
在这个重复器中，我引用了每次迭代中 CheckBox 的变化 ID。以下代码已添加到服务器端：CheckBox cbHastaAdi = (CheckBox)e.Item.FindControl("cbOzelKurumHastasi"); cbHastaAdi.Attributes["onclick"] = "javascript:isaretDegistir('" + cbHastaAdi.ClientID + "');"; 现在我可以访问正确的元素（没有标签）及其状态（选中或未选中）。非常感谢您的帮助，当然也感谢所有人。你们真是太棒了。 - uzay95
7
我通常使用jQuery的.is()功能来检查这个问题。
$('.cbOzelHastaAdi').click( function() {
  if($(this).is(':checked')){
    ...
  }else{
    ...
  }
})
你是对的。但它总是返回FALSE。 复选框HTML值为：<input id =“ rptOzel_ctl00_rptOzelHastalar_ctl00_cbOzelKurumHastasi”name =“ rptOzel $ ctl00 $ rptOzelHastalar $ ctl00 $ cbOzelKurumHastasi”type =“ checkbox”> <label for =“ rptOzel_ctl00_rptOzelHastalar_ctl00_cbOzelKurumHastasi”> LÜTFİ OĞUZ </ label> - uzay95
@uzay95，这是因为Corey Downie的代码有语法错误，应该是}else{。 - zac1987
3

可能是因为您将checked属性的值与字符串而不是布尔值进行比较，并且使用了比较值和类型的===运算符？

同意。我认为只需执行 if($(this).attr('checked')) {} 就可以了，因为我今天早些时候就是这样做的。 - Hooray Im Helping
是的，但它不起作用。因为asp.net不仅发送输入，还发送标签。这就是为什么is(':checked')是无用的。 - uzay95
1

我曾经遇到过同样的问题；检查复选框是否被选中（以任何不同的方式）总是返回false。

我的解决方案（问题的原因）在于使用的JQuery选择器。

uzay95使用了类选择器“.”来选择它的复选框。

$('.cbOzelHastaAdi')**

该函数返回一个结果集。因此，检查它是否被选中是无效的，因为可能有多个复选框... 我知道他在代码中使用了this关键字，但对我来说这也没有解决问题。

一旦您通过ID选择复选框，就可以评估其“checked”属性。

0

Russ Cam的答案是可行的，但为什么不更加jQuery化呢？

$(function() {     
    $('.cbOzelHastaAdi').live('click', function() {
        $(this).parents('div').find('table input:checkbox').attr('checked', $(this).attr('checked'));
    });
});

假设类cbOzelHastaAdi现在附加到复选框上，而不是跨度元素。这应该允许您避免所有混乱的ASP重命名，并且可以在页面上使用多个类似的表格，而无需多个单击事件函数。
@Ben - 你的代码语义上与“将所有已勾选的取消勾选，将所有未勾选的勾选”不同。如果有些已经被勾选或取消勾选了怎么办？你会得到负面或相反的模式！此外，如果你尝试运行这段代码，它不起作用，你不能勾选顶部的复选框，我认为这是因为它会在事件处理程序中被拾取。 - Russ Cam
@Russ - 你是对的，我误解了这里想要实现的内容。我更新了我的答案。 - Ben Koehler
0

这也是有效的：

(($('input[name="myCheckBox"]:checked').val())=='on')

它将返回true或false

其中复选框被定义为：

<input type="checkbox" name="myCheckBox">
0
我发现以下可能是使用jQuery确定选中状态的最佳方法：
var cbs = $(parentDiv).find('table input:checkbox:checked');

这将为您提供一个已被选中的每个输入的数组。

这主要来自于jQuery文档：

选择器/已选中

这很好。但是我无法确定第一个复选框是否已经被选中。is('checked') 存在问题。 - uzay95
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接