Select 所有/Select none 按钮在复选框上不起作用

Question

我已经为此搜索了几个小时并阅读了以前的帖子，但仍然一无所获。在我的代码中，个别国家很好地勾选并突出显示，但我无法获得 select 全部/取消勾选所有按钮来执行任何操作。

我的预期结果是：select 全部 (CountrySelectAll_ID_ws) 按钮应勾选并突出显示所有 3 个国家/地区。 un-select 按钮 (CountrySelectNone_ID_ws) 应该删除所有刻度和所有突出显示。

有人有什么建议吗？

我有一个fiddle：http://jsfiddle.net/petg1bhb/

我的代码：

<input type="button" id="CountrySelectAll_ID_ws" value ='Tick all' />
<input type="button" id="CountrySelectNone_ID_ws" value ='UNtick' />

<div class="multiselect">
<br>
<label><input type="checkbox" name="option[]" value="1" />Germany</label>
<label><input type="checkbox" name="option[]" value="2" />France</label>
<label><input type="checkbox" name="option[]" value="7" />Spain</label>
</div>




jQuery.fn.multiselect = function() { 
$(this).each(function() {
    var checkboxes = $(this).find("input:checkbox");
    checkboxes.each(function() {
        var checkbox = $(this);
        // Highlight pre-selected checkboxes
        if (checkbox.attr("checked"))
            checkbox.parent().addClass("col-on");

        // Highlight checkboxes that the user selects
        checkbox.click(function() {
            if (checkbox.attr("checked"))
                checkbox.parent().addClass("col-on");
            else
                checkbox.parent().removeClass("col-on");
            alert$("option:selected");
        });
    });
});
};


$(function() {
 $(".multiselect").multiselect();
});


$(function() {
$("#CountrySelectAll_ID_ws").on('click', function()
$('.multiselect').find("input:checkbox").prop('checked',true);
})
});


$(function() {
$("#CountrySelectNone_ID_ws").on('click', function()
{
$('.multiselect').find("input:checkbox").prop('checked',false);
})
});

Answer 1

这里是勾选和取消勾选 div 中所有复选框的示例，带有高亮格式：

$('#CountrySelectAll_ID_ws').on('click', function(e) {
  tickAll(true);
});
$('#CountrySelectNone_ID_ws').on('click', function(e) {
  tickAll(false);
});

// click on any checkbox
$('.multiselect input').on('click', function() {
  var input = $(this).parent();
  if (input.hasClass('col-on')) {
    input.removeClass('col-on');
  } else {
    input.addClass('col-on');
  }                           
});

// handle buttons                           
function tickAll(status) {
  $('.multiselect input').each(function(idx) {
    $(this).prop('checked', status)
    if(status) {
      $(this).parent().addClass('col-on');
    } else {
      $(this).parent().removeClass('col-on');
    }
  })
};

.multiselect {
  width: 20em;
  height: 15em;
  border: solid 1px #c0c0c0;
  overflow: auto;
}
.multiselect label {
  display: block;
}
.col-on {
  color: #ffffff;
  background-color: #000099;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="CountrySelectAll_ID_ws" value='Tick all' />
<input type="button" id="CountrySelectNone_ID_ws" value='UNtick' />

<div class="multiselect">
  <br>
  <label>
    <input type="checkbox" name="option[]" value="1" />Germany</label>
  <label>
    <input type="checkbox" name="option[]" value="2" />France</label>
  <label>
    <input type="checkbox" name="option[]" value="7" />Spain</label>
</div>

Select 所有/Select none 按钮在复选框上不起作用

Select all / Select none buttons not working on checkboxes

checkbox

jquery

selectall