使用 onChange 切换复选框 jQuery

Question

我有 2 组文本框

<div id="createPackage" style="display:block; text-align:left">
     <strong>Select Grade(s)</strong><a href="#" onclick="checkunCheckAll('grade')"><span id="selectAllgrade">Select All</span></a>
<table>
  <tbody>
     <tr>
        <td>
           <input type="checkbox" id="2" name="grade" value="2">
           <label for="2" class="label-normal">Grade 2</label>
        </td>
        <td>
           <input type="checkbox" id="3" name="grade" value="3">
           <label for="3" class="label-normal">Grade 3</label>
        </td>
        <td>
           <input type="checkbox" id="4" name="grade" value="4">
           <label for="4" class="label-normal">Grade 4</label>
        </td>
        <td>
           <input type="checkbox" id="5" name="grade" value="5">
           <label for="5" class="label-normal">Grade 5</label>
        </td>
        <td>
           <input type="checkbox" id="6" name="grade" value="6">
           <label for="6" class="label-normal">Grade 6</label>
        </td>
     </tr>
  </tbody>
</table>
<br>
<br>
  <strong>Select Subject(s)</strong><a href="#" onclick="checkunCheckAll('grade')"><span id="selectAllsubject">Select All</span></a>
<table>
  <tbody>
     <tr>
        <td class="td-left-spacing">
           <input type="checkbox" id="ela" name="subject" value="ela">
           <label for="ela" class="label-normal">ELA</label>
        </td>
        <td class="td-right-spacing">
           <input type="checkbox" id="math" name="subject" value="math">
           <label for="math" class="label-normal">Math</label>
        </td>
     </tr>
  </tbody>
</table>
<br>
<br>
<br>
<input type="submit" name="submit" id="submit" value="Create Package(s)" class="center">
</div>

我用 Javascript 编写了复选框切换

    function checkunCheckAll(name) {
    var check =  document.getElementById("selectAll" + name).innerHTML == "Select All"

    var arrMarkMail = document.getElementsByName(name);
    for (var i = 0; i < arrMarkMail.length; i++) {
        arrMarkMail[i].checked = check;
    }
    if (check)
    {
        document.getElementById("selectAll" + name).innerHTML = "Unselect All";
        document.getElementById("selectAll" + name).textContent = "Unselect All";
    }
    else
    {   
        document.getElementById("selectAll" + name).innerHTML = "Select All";
        document.getElementById("selectAll" + name).textContent = "Select All";
    }
}

但我想实现类似于此处的“全选”切换

http://jsfiddle.net/NogginBox/ScnQT/1/

但是，如果它们都被选中，我想将该范围的文本更改为“取消全选”。我还希望能够以编程方式检查每个组中是否至少有一个复选框被选中，如果是，则在底部显示提交按钮，如果不意味着该条件则隐藏。在 jQuery 中执行此操作的最简单方法是什么？如果不需要，我不想单独设置每个复选框的 onchange。

Answer 1

您可以通过以下方式做到这一点：

$("input[type='checkbox'][name='grade'], input[type='checkbox'][name='subject']").on('change', function () {
     //do stuff
     var gradeCheckboxGroupChecked = $("input[type='checkbox'][name='grade']:checked"), 
         gradeCheckboxGroup = $("input[type='checkbox'][name='grade']");
     if (gradeCheckboxGroupChecked.length == gradeCheckboxGroup.length && same for the subject) {
        // or you can check for gradeCheckboxGroupChecked.not(':checked').length == 0 && subjectCheckbox.not(':checked').length == 0 instead
        //do what you need if all are selected
     } else if (gradeCheckboxGroupChecked.length > 0 || same for the subject) {
       // do actions for if atleast one is selected
     }
});

我的解决方案是部分伪代码，appologies，这是一个快速的答案。

Answer 2

试试这个

$('[type=submit]').hide()
$("#selectAllsubject,#selectAllgrade").click(function() {
  if (!$(this).hasClass('checked')) {
    $(this).next().find('[type=checkbox]').prop('checked', 'checked')
  } else {
    $(this).next().find('[type=checkbox]').prop('checked', '')
  }
  $(this).toggleClass('checked')
  if ($('[type=checkbox]:checked').length) {
    $('[type=submit]').show()
  } else {
    $('[type=submit]').hide()
  }
});

$('[type=checkbox]').change(function() {
  if ($('[type=checkbox]:checked').length) {
    $('[type=submit]').show()
  } else {
    $('[type=submit]').hide()
  }
})

Working Fiddle Demo

Answer 3

$("#checkAll").change(function () {
    $("input:checkbox").prop('checked', $(this).prop("checked"));
    updaeLabelText();
});

var checkboxes = $("input[type=checkbox]:not(#checkAll)")
checkboxes.change(function () { 
	var checked = checkboxes.filter(":checked").length;
    $("#checkAll").prop('checked', (checked >= checkboxes.length)? true: false); 
    updaeLabelText();
});

function updaeLabelText () {
	$("#checkAll").parent().contents().last()[0].textContent = $("#checkAll").is(':checked')? ' Uncheck all' : ' Check all';
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form action="#">
    <p><label><input type="checkbox" id="checkAll"/> Check all</label></p>
    
    <fieldset>
        <legend>Loads of checkboxes</legend>
        <p><label><input type="checkbox" /> Option 1</label></p>
        <p><label><input type="checkbox" /> Option 2</label></p>
        <p><label><input type="checkbox" /> Option 3</label></p>
        <p><label><input type="checkbox" /> Option 4</label></p>
    </fieldset>
</form>