У меня есть следующее:
$(document).ready(function()
{
$("#select-all-teammembers").click(function() {
$("input[name=recipients\\[\\]]").attr('checked', true);
});
});
Я бы хотел, чтобы id="select-all-teammembers" был нажат для переключения между отмеченными и не отмеченными. Идеи? которые не являются десятками строк кода?
Вы можете написать:
$(document).ready(function() {
$("#select-all-teammembers").click(function() {
var checkBoxes = $("input[name=recipients\\[\\]]");
checkBoxes.prop("checked", !checkBoxes.prop("checked"));
});
});
Перед jQuery 1.6, когда мы только attr(), а не prop(), мы писали:
checkBoxes.attr("checked", !checkBoxes.attr("checked"));
Но prop() имеет лучшую семантику, чем attr() при применении к "логическим" атрибутам HTML, поэтому в этой ситуации обычно предпочтительнее.
//this toggles the checkbox, and fires its event if it has
$('input[type=checkbox]').trigger('click');
//or
$('input[type=checkbox]').click();
Я знаю, что это старый вопрос, но вопрос был немного неоднозначным в том, что toggle может означать, что каждый флажок должен переключать свое состояние, что бы это ни было. Если у вас 3 флажка и 2 непроверены, то переключение будет делать первые 3 непроверенных и последние 2 проверены.
Для этого ни одно из решений здесь не работает, поскольку все флажки имеют одинаковое состояние, а не переключают каждое состояние флажка. Выполнение $(':checkbox').prop('checked') во многих флажках возвращает логическое И между всеми .checked бинарными свойствами, то есть если один из них не отмечен, возвращаемое значение равно false.
Вам нужно использовать .each(), если вы хотите фактически переключить каждое состояние флажка, а не сделать все равным, например.
$(':checkbox').each(function () { this.checked = !this.checked; });
Обратите внимание: вам не нужно $(this) внутри обработчика, поскольку свойство .checked существует во всех браузерах.
Вот еще один способ, который вы хотите.
$(document).ready(function(){
$('#checkp').toggle(
function () {
$('.check').attr('Checked','Checked');
},
function () {
$('.check').removeAttr('Checked');
}
);
});
Я думаю, проще просто вызвать щелчок:
$("#select-all-teammembers").click(function() {
$("input[name=recipients\\[\\]]").trigger('click');
});
Используйте этот плагин:
$.fn.toggleCheck =function() {
if(this.tagName === 'INPUT') {
$(this).prop('checked', !($(this).is(':checked')));
}
}
Тогда
$('#myCheckBox').toggleCheck();
Начиная с jQuery 1.6 вы можете использовать .prop(function) для переключения проверенного состояния каждого найденного элемента:
$("input[name=recipients\\[\\]]").prop('checked', function(_, checked) {
return !checked;
});
Предполагая, что это изображение, которое должно переключать флажок, это работает для меня
<img src="something.gif" onclick="$('#checkboxid').prop('checked', !($('#checkboxid').is(':checked')));">
<input type="checkbox" id="checkboxid">
Флажок Check-all должен быть обновлен самостоятельно при определенных условиях. Попытайтесь нажать '# select-all-teammembers', затем отбросить несколько элементов и снова нажать кнопку "Выбрать все". Вы можете видеть несогласованность. Чтобы избежать этого, используйте следующий трюк:
var checkBoxes = $('input[name=recipients\\[\\]]');
$('#select-all-teammembers').click(function() {
checkBoxes.prop("checked", !checkBoxes.prop("checked"));
$(this).prop("checked", checkBoxes.is(':checked'));
});
Отметьте все флажки DOM-объект должен быть кэширован, как описано выше.
Лучший способ, о котором я могу думать.
$('#selectAll').change(function () {
var checked = (this.checked) ? true : false;
$('.reportCheckbox').prop('checked', checked);
});
или
$checkBoxes = $(".checkBoxes");
$("#checkAll").change(function (e) {
$checkBoxes.prop("checked", this.checked);
});
Самый простой пример:
// get DOM elements
var checkbox = document.querySelector('input'),
button = document.querySelector('button');
// bind "cilck" event on the button
button.addEventListener('click', toggleCheckbox);
// when clicking the button, toggle the checkbox
function toggleCheckbox(){
checkbox.checked = !checkbox.checked;
};<input type="checkbox">
<button>Toggle checkbox</button>просто вы можете использовать этот
$("#chkAll").on("click",function(){
$("input[name=checkBoxName]").prop("checked",$(this).prop("checked"));
});
если вы хотите переключать каждый блок отдельно (или просто один блок работает так же хорошо):
Я рекомендую использовать .each(), так как его легко модифицировать, если вы хотите, чтобы произошли разные вещи и все еще относительно короткие и легко читаемые.
например.
// toggle all checkboxes, not all at once but toggle each one for its own checked state:
$('input[type="checkbox"]').each(function(){ this.checked = ! this.checked });
// check al even boxes, uncheck all odd boxes:
$('input[type="checkbox"]').each(function(i,cb){ cb.checked = (i%2 == 0); });
// set all to checked = x and only trigger change if it actually changed:
x = true;
$('input[type="checkbox"]').each(function(){
if(this.checked != x){ this.checked = x; $(this).change();}
});
на боковой ноте... не уверен, почему каждый использует .attr() или .prop() для (un) проверки вещей.
Насколько я знаю, element.checked всегда работал одинаково во всех браузерах?
jQuery("#checker").click(function(){
jQuery("#mydiv :checkbox").each(function(){
this.checked = true;
});
});
jQuery("#dechecker").click(function(){
jQuery("#mydiv :checkbox").each(function(){
this.checked = false;
});
});
jQuery("#checktoggler").click(function(){
jQuery("#mydiv :checkbox").each(function(){
this.checked = !this.checked;
});
});
;)
по моему мнению, самый правильный человек, который предложил нормальный вариант, - GigolNet Gigolashvili, но я хочу предложить еще более красивый вариант. Проверьте его
$(document).on('click', '.fieldWrapper > label', function(event) {
event.preventDefault()
var n = $( event.target ).parent().find('input:checked').length
var m = $( event.target ).parent().find('input').length
x = n==m? false:true
$( event.target ).parent().find('input').each(function (ind, el) {
// $(el).attr('checked', 'checked');
this.checked = x
})
})
Настройка "checked" или null вместо true или false соответственно будет выполнять работу.
// checkbox selection
var $chk=$(':checkbox');
$chk.prop('checked',$chk.is(':checked') ? null:'checked');
Вы также можете написать
$(function() {
$("#checkbox-toggle").click(function() {
$('input[type=checkbox][name=checkbox_id\\[\\]]').click();
});
});
Просто нужно вызвать событие щелчка, когда пользователь нажимает кнопку с id '# checkbox-toggle'.
Лучший подход и UX
$('.checkall').on('click', function() {
var $checks = $('checks');
var $ckall = $(this);
$.each($checks, function(){
$(this).prop("checked", $ckall.prop('checked'));
});
});
$('checks').on('click', function(e){
$('.checkall').prop('checked', false);
});
<table class="table table-datatable table-bordered table-condensed table-striped table-hover table-responsive">
<thead>
<tr>
<th class="col-xs-1"><a class="select_all btn btn-xs btn-info"> Select All </a></th>
<th class="col-xs-2">#ID</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="order333"/></td>
<td>{{ order.id }}</td>
</tr>
<tr>
<td><input type="checkbox" name="order334"/></td>
<td>{{ order.id }}</td>
</tr>
</tbody>
</table>
Try:
$(".table-datatable .select_all").on('click', function () {
$("input[name^='order']").prop('checked', function (i, val) {
return !val;
});
});
Это очень хорошо для меня.
$("#checkall").click(function() {
var fruits = $("input[name=fruits\\[\\]]");
fruits.prop("checked", $(this).prop("checked"));
});
Этот код переключит этот флажок, щелкнув любой аниматор тумблера, используемый в веб-шаблонах. Замените ".onoffswitch-label" как доступный в вашем коде. "checkboxID" - это установленный здесь флажок.
$('.onoffswitch-label').click(function () {
if ($('#checkboxID').prop('checked'))
{
$('#checkboxID').prop('checked', false);
}
else
{
$('#checkboxID').prop('checked', true);
}
});
Вот способ jQuery для переключения флажков без необходимости выбора флажка с помощью html5 и меток:
<div class="checkbox-list margin-auto">
<label class="">Compare to Last Year</label><br>
<label class="normal" for="01">
<input id="01" type="checkbox" name="VIEW" value="01"> Retail units
</label>
<label class="normal" for="02">
<input id="02" type="checkbox" name="VIEW" value="02"> Retail Dollars
</label>
<label class="normal" for="03">
<input id="03" type="checkbox" name="VIEW" value="03"> GP Dollars
</label>
<label class="normal" for="04">
<input id="04" type="checkbox" name="VIEW" value="04"> GP Percent
</label>
</div>
$("input[name='VIEW']:checkbox").change(function() {
if($(this).is(':checked')) {
$("input[name='VIEW']:checkbox").prop("checked", false);
$("input[name='VIEW']:checkbox").parent('.normal').removeClass("checked");
$(this).prop("checked", true);
$(this).parent('.normal').addClass('checked');
}
else{
$("input[name='VIEW']").prop("checked", false);
$("input[name='VIEW']").parent('.normal').removeClass('checked');
}
});
Ну есть более простой способ
Сначала Дайте вашим флажкам пример класса 'id_chk'
Затем внутри флажка, в котором будут установлены флажки "id_chk", состояние put:
<input type='checkbox' onchange='js:jQuery(".id_chk").prop("checked", jQuery(this).prop("checked"))' />
Вот и все, надеюсь, что это поможет