Моя цель

Когда я нажимаю Check All в первом столбце, все флажки в этом столбце должны быть отмечены, и должна появиться кнопка Set . В то время как другие флажки в другом столбце должны быть сняты. Кроме того, когда я нажимаю Check All во втором столбце, кнопка Set в первом столбце будет скрыта и появится во втором столбце, а затем снимите другие флажки.

КОД HTML:

<div id="allCheckboxes">
<table width="500px">
 <tr>
    <td>Check ALL <input type="checkbox" id="checkAll_1"><div id="setBttn_1" style="display:none;"><input type="button" value="Set"></div></td>
    <td>Check ALL <input type="checkbox" id="checkAll_2"><div id="setBttn_2" style="display:none;"><input type="button" value="Set"></div></td>
    <td>Check ALL <input type="checkbox" id="checkAll_3"><div id="setBttn_3" style="display:none;"><input type="button" value="Set"></div></td>
 </tr>
 <tr>
  <td><input type="checkbox" id="chkBox1" name="Box1" checked value="1" /></td>
  <td><input type="checkbox" id="chkBox2" name="Box2" value="12"/></td>
  <td><input type="checkbox" id="chkBox3" name="Box3" value="13"/></td>
  <tr>
  <td><input type="checkbox" id="chkBox10" name="Box1" checked value="001" /></td>
  <td><input type="checkbox" id="chkBox20" name="Box2" value="182"/></td>
  <td><input type="checkbox" id="chkBox30" name="Box3" value="123"/></td>
  </tr>
  <tr>
  <td><input type="checkbox" id="chkBox11" name="Box1" value="333" /></td>
  <td><input type="checkbox" id="chkBox181" name="Box2" value="184442"/></td>
  <td><input type="checkbox" id="chkBox101" name="Box3" checked value="1243"/></td>
  </tr>
 </table>
</div>

jQuery:

$('input[type="checkbox"]').on('change', function() {
  $(this).closest('tr').find('input').not(this).prop('checked', false);
});
$('#checkAll_1').change(function () {
  $('[name="Box1"]').prop('checked', $(this).prop("checked"));
  if($('#checkAll_1').is(':checked')) {
    $('#setBttn_1').show();
  } else {
    $('#setBttn_1').hide();
  }
});
$('#checkAll_2').change(function () {
  $('[name="Box2"]').prop('checked', $(this).prop("checked"));
  if($('#checkAll_2').is(':checked')) {
    $('#setBttn_2').show();
  } else {
    $('#setBttn_2').hide();
  }
});
$('#checkAll_3').change(function () {
  $('[name="Box3"]').prop('checked', $(this).prop("checked"));
  if($('#checkAll_3').is(':checked')) {
    $('#setBttn_3').show();
  } else {
    $('#setBttn_3').hide();
  }
});

Текущий результат - когда я нажимаю Check All в первом столбце, он не снимает другие флажки. Когда я нажимаю Check All во втором столбце, кнопка Set в первом столбце не скрывается. Можно ли вернуться к ранее отмеченным опциям непосредственно перед текущим выбором, если я откажусь от «Проверить все»?

LIVE DEMO: http://jsfiddle.net/WzuMa/142/

3
user1234 17 Дек 2015 в 15:44

4 ответа

Лучший ответ

Проблема в том, что prop не вызывает изменения (по уважительной причине, так как это может вызвать рекурсивные события по умолчанию).

Вы можете просто вызвать событие change() после установки prop, но вам нужно убедиться, что оно не запускается рекурсивно (поэтому добавлена переменная sentinel):

var processing = false;
$('input[type="checkbox"]').on('change', function() {
  if (!processing) {
    processing = true;
    $(this).closest('tr').find('input[type="checkbox"]').not(this).prop('checked', false).trigger('change');
    processing = false;
  }
});

JSFiddle: http://jsfiddle.net/TrueBlueAussie/WzuMa/143/

Обновить - восстановить предыдущие значения при снятии отметки

var processing = false;
var $checkboxes = $('input[type="checkbox"]');
$checkboxes.on('change', function() {
  if (!processing) {
    processing = true;
    if (this.checked){
        // Store all answers on a data attribute
        $checkboxes.each(function(){
            $(this).data('lastcheck', $(this).prop('checked'));
        });
        $(this).closest('tr').find('input[type="checkbox"]').not(this).prop('checked', false).trigger('change');
    }
    else {
            // Restore all the previous checked box states
        $checkboxes.not(this).each(function(){
                $(this).prop('checked', $(this).data('lastcheck')).removeData('lastcheck');
        });
    }
    processing = false;
  }
});

JSFiddle: http://jsfiddle.net/TrueBlueAussie/WzuMa/144/

Вы можете настроить этот метод для работы со строками вместо нижних флажков, но я должен оставить кое-что для вас:)

1
Gone Coding 17 Дек 2015 в 14:45

Вы можете использовать это:

$('#allCheckboxes').find('tr').first().find(':checkbox').on('change', function(e) {
  var $this = $(this),
    idx = $this.closest('td').index();
  $('div[id^="setBttn"]').hide();
  $this.next('div').toggle(this.checked);
  $('[id^="checkAll"]:checked').not(this).prop('checked', !this.checked);
  $('#allCheckboxes').find('tr').not(':first').each(function() {
    $(this).find(':checkbox:checked').prop('checked', !$this.prop('checked'));
    $(this).find('td').eq(idx).find(':checkbox').prop('checked', $this.prop('checked'));
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="allCheckboxes">
  <table width="500px">
    <tr>
      <td>Check ALL
        <input type="checkbox" id="checkAll_1">
        <div id="setBttn_1" style="display:none;">
          <input type="button" value="Set">
        </div>
      </td>
      <td>Check ALL
        <input type="checkbox" id="checkAll_2">
        <div id="setBttn_2" style="display:none;">
          <input type="button" value="Set">
        </div>
      </td>
      <td>Check ALL
        <input type="checkbox" id="checkAll_3">
        <div id="setBttn_3" style="display:none;">
          <input type="button" value="Set">
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" id="chkBox1" name="Box1" checked value="1" />
      </td>
      <td>
        <input type="checkbox" id="chkBox2" name="Box2" value="12" />
      </td>
      <td>
        <input type="checkbox" id="chkBox3" name="Box3" value="13" />
      </td>
      <tr>
        <td>
          <input type="checkbox" id="chkBox10" name="Box1" checked value="001" />
        </td>
        <td>
          <input type="checkbox" id="chkBox20" name="Box2" value="182" />
        </td>
        <td>
          <input type="checkbox" id="chkBox30" name="Box3" value="123" />
        </td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" id="chkBox11" name="Box1" value="333" />
        </td>
        <td>
          <input type="checkbox" id="chkBox181" name="Box2" value="184442" />
        </td>
        <td>
          <input type="checkbox" id="chkBox101" name="Box3" checked value="1243" />
        </td>
      </tr>
  </table>
</div>
1
Jai 17 Дек 2015 в 13:07

Попробуйте ниже JS, пока что все жестко запрограммировано, но если это решение соответствует ожиданиям, то я могу обновить его до большей динамики

  

 $('input[type="checkbox"]').on('change', function() {
		$(this).closest('tr').find('input').not(this).prop('checked', false);
  
	});
	
	$('#checkAll_1').change(function () {
 		$('[name="Box1"]').prop('checked', $(this).prop("checked"));
    $('[name="Box2"],[name="Box3"]').prop('checked', false);
 if($('#checkAll_1').is(':checked')){
			$('#setBttn_1').show();
     $('#setBttn_2,#setBttn_3').hide();
  	}else{
			$('#setBttn_1').hide();
		}
    
	});
	
	$('#checkAll_2').change(function () {
		$('[name="Box2"]').prop('checked', $(this).prop("checked"));
      $('[name="Box1"],[name="Box3"]').prop('checked', false);
  	if($('#checkAll_2').is(':checked')){
			$('#setBttn_2').show();
      $('#setBttn_1,#setBttn_3').hide();
  	}else{
			$('#setBttn_2').hide();
		}
	});
	
	$('#checkAll_3').change(function () {
		$('[name="Box3"]').prop('checked', $(this).prop("checked"));
      $('[name="Box1"],[name="Box2"]').prop('checked', false);
  	if($('#checkAll_3').is(':checked')){
			$('#setBttn_3').show();
      $('#setBttn_1,#setBttn_2').hide();
  	}else{
			$('#setBttn_3').hide();
		}
	});
1
Yogesh Sharma 17 Дек 2015 в 13:15

Если вы программно устанавливаете свойство checked, оно не вызывает обработчик события change.

Для запуска обработчика события должна использоваться функция .trigger(event).

$('input[type="checkbox"]').on('change', function() {
  $(this).closest('tr').find('input').not(this).prop('checked', false);
});

$('#checkAll_1').change(function() {
  $('[name="Box1"]').prop('checked', $(this).prop("checked")).trigger('change');
  if ($('#checkAll_1').is(':checked')) {
    $('#setBttn_1').show();
  } else {
    $('#setBttn_1').hide();
  }
});

$('#checkAll_2').change(function() {
  $('[name="Box2"]').prop('checked', $(this).prop("checked")).trigger('change');
  if ($('#checkAll_2').is(':checked')) {
    $('#setBttn_2').show();
  } else {
    $('#setBttn_2').hide();
  }
});

$('#checkAll_3').change(function() {
  $('[name="Box3"]').prop('checked', $(this).prop("checked")).trigger('change');
  if ($('#checkAll_3').is(':checked')) {
    $('#setBttn_3').show();
  } else {
    $('#setBttn_3').hide();
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="allCheckboxes">
  <table width="500px">
    <tr>
      <td>Check ALL
        <input type="checkbox" id="checkAll_1">
        <div id="setBttn_1" style="display:none;">
          <input type="button" value="Set">
        </div>
      </td>
      <td>Check ALL
        <input type="checkbox" id="checkAll_2">
        <div id="setBttn_2" style="display:none;">
          <input type="button" value="Set">
        </div>
      </td>
      <td>Check ALL
        <input type="checkbox" id="checkAll_3">
        <div id="setBttn_3" style="display:none;">
          <input type="button" value="Set">
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" id="chkBox1" name="Box1" checked value="1" />
      </td>
      <td>
        <input type="checkbox" id="chkBox2" name="Box2" value="12" />
      </td>
      <td>
        <input type="checkbox" id="chkBox3" name="Box3" value="13" />
      </td>
      <tr>
        <td>
          <input type="checkbox" id="chkBox10" name="Box1" checked value="001" />
        </td>
        <td>
          <input type="checkbox" id="chkBox20" name="Box2" value="182" />
        </td>
        <td>
          <input type="checkbox" id="chkBox30" name="Box3" value="123" />
        </td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" id="chkBox11" name="Box1" value="333" />
        </td>
        <td>
          <input type="checkbox" id="chkBox181" name="Box2" value="184442" />
        </td>
        <td>
          <input type="checkbox" id="chkBox101" name="Box3" checked value="1243" />
        </td>
      </tr>
  </table>
</div>
1
Satpal 17 Дек 2015 в 12:49