我创建的某些JavaScript出现问题。如果“全部选中”中的某个项目处于“未选中”状态,则需要从“全部选中”框中删除选中的项目,同样,当“全部选中”时,我也不想仅选中“全部选中”框来浏览其他项目。

check all, item 1, item 2


删除项目1并检查所有未选中的项目,所有经过检查的项目都是项目。如果选中全部检查,则检查项目1和项目2,但不进行检查。



// all "check all" checkboxes will have the class "checkall"
// and the id to match the location, e.g. wales, etc

$(".checkall").on('change', function() {

  // all normal checkboxes will have a class "chk_xxxxxx"
  // where "xxxx" is the name of the location, e.g. "chk_wales"

  // get the class name from the id of the "check all" box
  var checkboxesClass = '.chk_' + $(this).attr("id");

  // now get all boxes to check
  var boxesToCheck = $(checkboxesClass);

  // check all the boxes
  boxesToCheck.prop('checked', this.checked);
});


// display what the user has chosen
$("input[type='checkbox']").change(function() {

  $("#checked").empty();

  $("input[type='checkbox']:checked").each(function() {

    // see if it is a "check all" box
    if ($(this).attr("class") === "checkall") {
      // Display the id of the "check all" box
      $("#checked").html($("#checked").html() + '<h3>' + $(this).attr("id").toUpperCase() + "</h3>");
    } else {
      // display the label text for all normal checkboxes
      $("#checked").html($("#checked").html() + $(this).next().text() + "<br>");
    }

  });
});


// With some more work you could make the Check All headings show when only one or two checkboxes were checked. It depends how you need it to work.

<!DOCTYPE html>
<html>

<head>

  <meta charset="utf-8">
  <title>Test</title>
</head>

<body>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <input type="checkbox" id="wales" class="checkall" value="1">
  <label for="wales">Check All</label>
  <input type="checkbox" id="checkItem1" value="2" class="chk_wales">
  <label for="checkItem1">Item 1</label>
  <input type="checkbox" id="checkItem2" value="2" class="chk_wales">
  <label for="checkItem2">Item 2</label>
  <input type="checkbox" id="checkItem3" value="2" class="chk_wales">
  <label for="checkItem3">Item 3</label>

  <hr />

  <input type="checkbox" id="west" class="checkall" value="3">
  <label for="west">Check All</label>
  <input type="checkbox" id="checkItem4" value="4" class="chk_west">
  <label for="checkItem4">Item 1</label>
  <input type="checkbox" id="checkItem5" value="4" class="chk_west">
  <label for="checkItem5">Item 2</label>
  <input type="checkbox" id="checkItem6" value="4" class="chk_west">
  <label for="checkItem6">Item 3</label>

  <hr />

  <input type="checkbox" id="east" class="checkall" value="5">
  <label for="east">Check All</label>
  <input type="checkbox" id="checkItem7" value="6" class="chk_east">
  <label for="checkItem7">Item 1</label>
  <input type="checkbox" id="checkItem8" value="6" class="chk_east">
  <label for="checkItem8">Item 2</label>
  <input type="checkbox" id="checkItem9" value="6" class="chk_east">
  <label for="checkItem9">Item 3</label>

  <p>You have selected:</p>

  <div id="checked">


  </div>



</body>

</html>

最佳答案

不确定“拉穿”是什么意思,但是可以通过以下方法取消选中全部复选框:

if (!$currentCheckbox.hasClass('checkall')) {
    var $previousCheckAll = $currentCheckbox.prevAll('.checkall');
    if ($previousCheckAll.length>0)
    {
        $previousCheckAll.first().prop('checked',false);
    }
}


只需将代码插入行下方

 $("#checked").empty();


您的JSbin。

07-24 09:39
查看更多