Question

我有两组文本框

<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

＆＃13;

$("#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';
}

＆＃13;

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

＆＃13;

使用onChange切换Checkbox jQuery

3 个答案: