Question

我是JQuery的新手，但对HTML和CSS有一些经验。我正在尝试在表单上创建一个更具交互性的复选框列表，我虽然可以将它们放在一个表中，但是单击每行内的任何位置都会检查相应的复选框并更改行颜色，以便用户知道选择已经制作。对于某些行，我需要切换效果来显示可以输入更多信息的新行。我自己做这些事情取得了一些成功，却无法让他们一起工作。请帮助！

我的切换效果很简单

$(document).ready(function(){
    $("#top1").click(function(){$("#bottom1").toggle();});
    $("#top2").click(function(){$("#bottom2").toggle();});
});

对于我使用的点击选择

$(document).ready(function() {
  $('#row5 tr').click(function(event) {
    $(this).toggleClass('selected');
    if (event.target.type !== 'checkbox') {
      $(':checkbox', this).trigger('click');
    }
  });
});

每次点击都会添加/删除我用来更改行颜色的'selected'类。但是我发现只有当我对click事件使用匿名函数并为额外行添加代码时，所选类才会生效，这会破坏函数。

我错过了什么，或者我做错了什么？会喜欢一些指导。

这是我正在使用的HTML结构

<table class="rowclick" id="rowclick5">
  <tbody>
    <tr>
      <td class="cb"><input type="checkbox" value="yes" /></td>
      <td>row 1</td>
    </tr>    
    <tr>
      <td class="cb" id="bottom2"><input type="checkbox" value="yes" /></td>
      <td>row 2</td>
    </tr>    
    <tr>
      <td class="cb"><input type="checkbox" value="yes" /></td>
      <td>row 3</td>
    </tr>
  </tbody>
</table>

Answer 1

以下是我要做的事情：

$(function() {
    $(document).on('click', '#row5 tr', function (event) {
        var newState = !$(this).is('.selected');

        $(this)
            .toggleClass('selected', newState)
            .find(':checkbox').prop('checked', newState);
    });
});

这使用event delegation（通过$(document).on()）并防止复选框的状态（选中/未选中）和行的状态（选中/未选中）变得不一致。

请注意，我可能会使用tr.selectable而不是#row5 tr，因为后者有点过于具体，因此阻碍了重复使用。

Answer 2

您可以使用以下方式检查/取消选中：

Subscription::whereRaw('
    (select count(*) from `attendances` where `attendances`.`subscription_id` = `subscriptions`.`id`) < `subscriptions`.`entrance_limit`
');

单个事件

2 个答案:

-jsFiddle-