Question

此代码适用于4个复选框。

当检查前3个方框时，需要检查第4个方框，当第4个未经检查时，前3个应取消选中如果检查了所有4个框并且未选中前3个框中的1个，则应取消选中第4个框。

问题是这个代码需要重复7次，使用不同的id。即＃a1为＃b1或＃a4为＃d4。

$('#a1, #a2, #a3, #a4').change(function() {
if ($(this).is('#a1, #a2, #a3')) {
  if ($('#a4').prop('checked', true)) {
    $('#a4').prop('checked', false);
  }

  if ($('#a1:checked').length === $('#a1').length && $('#a2:checked').length === $('#a2').length && $('#a3:checked').length === $('#a3').length) {
    $('#a4').prop('checked', true);
  }
}
if ($(this).is('#a4')) {
  if ($(this).prop('checked')) {
    $('#a1, #a2, #a3').each(function(){
        $(this).prop('checked', true);
    });
  }
  else {
    $('#a1, #a2, #a3').each(function(){
        $(this).prop('checked', false);
    });
      }
    }
});

全部谢谢

Answer 1

https://jsfiddle.net/cwLhdcwL/

要拆分复选框，请使用：data-area属性。

#a4, #b4, ...元素应使用data-role="cb-master"属性标记，而#a[1..3], #b[1..3], ...元素应使用data-role="cb-child"属性标记。

Answer 2

你可以使用Javascript，虽然我没有测试这个

Javascript：default.js

function checkCheckbox(checkbox) {
    if (cb1.checked === true && cb2.checked === true && cb3.checked === true) {
        document.getElementById('cb4').checked = true;
    }

    // To work the other way: if checkbox 4 is checked then check all others
    else if (cb4.checked === true) {
        document.getElementById('cb1').checked = true;
        document.getElementById('cb2').checked = true;
        document.getElementById('cb3').checked = true;
    }
}

// For older browsers
function checkCheckbox(checkbox) {
    if (document.getElementById('cb1').value === true && document.getElementById('cb2').value === true && document.getElementById('cb3').value === true) {
        document.getElementById('cb4').checked = true;
    }

    // To work the other way: if checkbox 4 is checked then check all others
    else if (document.getElementById('cb4').value === true) {
        document.getElementById('cb1').checked = true;
        document.getElementById('cb2').checked = true;
        document.getElementById('cb3').checked = true;
    }
}

HTML：index.html

<!DOCTYPE html>
<html>
  <head>
    <title>
      Checkbox Example
    </title>
    <script src="default.js">
    </script>
  </head>
  <body>
    <input type="checkbox" id="cb1" name="cb1" onclick="checkCheckbox" />
    <br />
    <input type="checkbox" id="cb2" name="cb2" onclick="checkCheckbox" />
    <br />
    <input type="checkbox" id="cb3" name="cb3" onclick="checkCheckbox" />
    <br />
    <input type="checkbox" id="cb4" name="cb4" onclick="checkCheckbox" />
  </body>
</html>

有没有办法可以压缩这段代码？

2 个答案: