Установите флажки в зависимости от выбора

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>

ЗДЕСЬ МОЙ ЧЕК БЛОК ДЛЯ FREELANCERES

 <% @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