javascript - 根据选择选择一些复选框

Question

我有三个复选框按钮。我希望它的功能是这样的，当我单击全选时，所有复选框都要被选中，当我单击检查公司时，只有公司需要被选中，当我选择自由职业者时，只有自由职业者复选框要被选中。

现在第一个复选框工作正常，所有复选框都被选中和取消选中，但其他两个复选框不起作用。

$('#check_all').on("click", function(){
  var cbxs = $('input[type="checkbox"]');
  cbxs.prop("checked", !cbxs.prop("checked"));
});  
 

$('#mycompanies').click(function(){
        var select_all = (this.value === 'Select All');
        $('input:checkbox').attr('checked', select_all);
        this.value = (select_all) ? 'Deselect All' : 'Select All';        
    });
 $('#myfreelancers').click(function(){
        var select_all = (this.value === 'Select All');
        $('input:checkbox').attr('checked', select_all);
        this.value = (select_all) ? 'Deselect All' : 'Select All';        
    });

<button type="button" id="check_all" class="btw">Check all/Uncheck all</button>
<button type="button" id="mycompanies"  class="mycompanies">Check all companies</button> 
<button type="button" id="myfreelancers" class="myfreelancers">Check all freelancers</button>

这是我为自由职业者准备的复选框标签:

 <% @m_freelancers.each do |freelancer| %>
          <tr>
            <td><%=check_box_tag 'selected_freelancers[]', freelancer.id%>
          
            <td><%= freelancer.email %></td>
<tr/>
        <% end %>

公司复选框:

<% @m_companies.each do |company| %>
          <tr>
            <td><%=check_box_tag 'selected_companies[]', company.id%></td>
          
            <td><%= company.user.email %></td>
        
       </tr>
        <% end %>

Answer 1

使用选择器[name="myElementName"]按名称查找元素，并相应地检查它们。由于您的元素是 HTML“数组”([])，因此您还需要将其包含在选择器中。

您可能需要考虑使用一个类来代替，可能会更干净一些 - 但这个选择器就可以了。

// Check all if all is unchecked - remove all checks if one or more is checked
$('#check_all').on("click", function(){
    var cbxs = $('input[type="checkbox"]');
    cbxs.prop("checked", !cbxs.prop("checked"));
}); 

$("#mycompanies").on("click", function() {
    var companyCheckboxes = $('[name="companies[]"]');
    companyCheckboxes.prop("checked", true);
});

$("#myfreelancers").on("click", function() {
    var freelancerCheckboxes = $('[name="freelancers[]"]');
    freelancerCheckboxes.prop("checked", true);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button type="button" id="check_all" class="btw">Check all/Uncheck all</button>
<button type="button" id="mycompanies"  class="mycompanies">Check all companies</button> 
<button type="button" id="myfreelancers" class="myfreelancers">Check all freelancers</button>
<br />
<br />

<input type="checkbox" name="freelancers[]" /> Freelance 1<br />
<input type="checkbox" name="freelancers[]" /> Freelance 2<br />
<input type="checkbox" name="freelancers[]" /> Freelance 3<br />
<input type="checkbox" name="freelancers[]" /> Freelance 4<br />


<input type="checkbox" name="companies[]" /> Company 1<br />
<input type="checkbox" name="companies[]" /> Company 2<br />
<input type="checkbox" name="companies[]" /> Company 3<br />
<input type="checkbox" name="companies[]" /> Company 4