我已经搜索了几个小时并阅读了以前的帖子,但仍然没有运气。在我的代码中,各个国家都很好地勾选并突出显示,但是我无法选择所有/取消所有按钮来执行任何操作。
我的预期结果是:选择所有(CountrySelectAll_ID_ws
)按钮应勾选并突出显示所有3个国家/地区。取消选择按钮(CountrySelectNone_ID_ws
)应删除所有刻度和所有高光。
有人有任何建议吗?
我有一个小提琴: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);
})
});
答案 0 :(得分: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>