复选框和JQUERY:"已选中"始终为FALSE

Question

代码如下,复选框始终为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>

Answer 1

其中一个问题是,您checked在顶部复选框和标签周围的跨度上具有属性,并将事件处理程序绑定到跨度,因此checked将始终保留checked在跨度上.

我已将事件处理程序移动到复选框,并稍微整理了代码.虽然我不认为在HTML元素上构建自己的属性存在问题,即span元素上的checked属性(我认为XHTML严格验证失败了),但我不认为这样做是好的做法.

我可以看到你正在使用ASP.NET,基于ID修改 - 你可以使用服务器端<%= myControl.ClientID %>来获取在发送给客户端的HTML中呈现的损坏的id.

这里的工作示例

   $(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); });
           }

        });
    });

编辑:

在回复您的评论时,您有几种解决方案的选择.如果你在aspx页面中编写jQuery,那么你可以简单地使用

$('#<%= 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

Answer 2

我通常使用jQuery的.is()功能来检查这个

$('.cbOzelHastaAdi').click( function() {
  if($(this).is(':checked')){
    ...
  }else{
    ...
  }
})