Question

我有一个带复选框的页面，其中一个是全选按钮。因此，当用户单击全选时，它会检查所有其他框，当单击另一个框时，它将取消选中全选。这是代码。

          $(document).ready(function(event){   
                 //alert('wtf');
            $('#mailSubscribeAll').click(function(event){
                 //alert('wtf');
                $('.mailingCheckbox').attr('checked','checked');
            });             

            $('.mailingCheckbox').bind('click',function(event){
                //alert('wtf');
                $('#mailSubscribeAll').removeAttr('checked');
            });

        });

所以我的页面正在加载jQuery，第一个警报触发器。所有点击事件都不会发出警报。我仔细检查了我的HTML是否正确。

我是否在jQuery中使用了错误的事件，或者我的页面上是否存在与其他不是jQuery的javascript的冲突？

HTML片段：

    <tr>
    <td class="CBT3" colspan="3" height="29">
        <input type="checkbox" class="mailingCheckbox" id="mailNewsAlerts"    value="1" {if $smarty.session.profile.mailNewsAlerts}checked{/if} onclick="subscribeMarkProfile()">
        <label for="mailNewsAlerts"><b>News Alerts</b> - <cite>The latest breaking news from XXXXXXX</cite></label>
    </td>
</tr>    
<tr>
    <td class="CBT3" colspan="3" height="29">
        <input type="checkbox" id="mailSubscribeAll"    value="1" {if $smarty.session.profile.mailSubscribeAll}checked{/if} >
        <label for="mailSubscribeAll"><b>Subscribe me to all XXXXX newsletters!</b> </label>
    </td>
</tr>

我还要添加页面的一部分，当页面加载时，复选框不可见，但它在HTML中。单击按钮后显示该区域，但是当页面加载时，首先这些复选框是不可见的。

Answer 1

使用以下代码按预期方式工作：

<div>
  <input type="checkbox" id="mailSubscribeAll"/>
  <input type="checkbox" class="mailingCheckbox"/>
  <input type="checkbox" class="mailingCheckbox"/>
</div>

<script type="text/javascript">
  $(document).ready(function(event){   
    $('#mailSubscribeAll').click(function(){
      $('.mailingCheckbox').attr('checked','checked');
    });             
    $('.mailingCheckbox').click(function(){
      $('#mailSubscribeAll').removeAttr('checked');
    });
  });    
</script>

这是否能解决您的问题？

Answer 2

 $("input:checkbox #mailSubscribeAll").click(function(event){
   $('.mailingCheckbox').attr('checked','checked');
});

它看起来很好，但你现在可以尝试这个代码。

Answer 3

当您以编程方式更改复选框的状态时，还必须检查事件change，不会始终点击“

$('.mailingCheckbox').bind('change', ...

因为您有两个功能，所以您应该执行以下操作：

function changeMailingCheckbox(...) { ... }
$('.mailingCheckbox').bind('change', changeMailingCheckbox)
$('.mailingCheckbox').bind('click', changeMailingCheckbox)

jQuery复选框事件没有触发？

3 个答案: