切换复选框的jQuery用的onChange

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() { 
 
\t var checked = checkboxes.filter(":checked").length; 
 
    $("#checkAll").prop('checked', (checked >= checkboxes.length)? true: false); 
 
    updaeLabelText(); 
 
}); 
 

 
function updaeLabelText() { 
 
\t $("#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>