Question

以下是我目前使用的代码的简化版本：

的Javascript

function checkboxlimit(checkgroup) {
  var checkgroup = checkgroup
  for (var i = 0; i < checkgroup.length; i++) {
    checkgroup[i].onclick = function() {
      var checkedcount = 0
      for (var i = 0; i < checkgroup.length; i++)
        checkedcount += (checkgroup[i].checked) ? 1 : 0
      if (checkedcount > 2) {
        this.checked = false
      }
    }
  }
}

var sort_form = document.forms.sortus;
var sort_checkboxes = sort_form.elements['squarepick[]'];
checkboxlimit(sort_checkboxes);

CSS

input.square {
  margin: 0;
  padding: 0;
  display: none;
}

.sorttile {
  cursor: pointer;
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid #CCCCCC;
  margin: 1px;
}

.sorttile:hover {
  border: 2px solid #AAAAAA;
}

HTML

<form enctype='multipart/form-data' method='POST' id='sortus'>
  <input id='1-1' class='square' type='checkbox' name='squarepick[]' value='1-1' />
  <label class='sorttile' for='1-1' style='background-color:#FF0000;'>
    <input type='hidden' name='1-1' value='#FF0000' />
  </label>
  <input id='1-2' class='square' type='checkbox' name='squarepick[]' value='1-2' />
  <label class='sorttile' for='1-2' style='background-color:#FFFF00;'>
<input type='hidden' name='1-2' value='#FFFF00' />
  </label>
  <input id='1-3' class='square' type='checkbox' name='squarepick[]' value='1-3' />
  <label class='sorttile' for='1-3' style='background-color:#00FF00;'>
    <input type='hidden' name='1-3' value='#00FF00' />
  </label>
  <br/>
  <input id='2-1' class='square' type='checkbox' name='squarepick[]' value='2-1' />
  <label class='sorttile' for='2-1' style='background-color:#00FFFF;'>
    <input type='hidden' name='2-1' value='#00FFFF' />
  </label>
  <input id='2-2' class='square' type='checkbox' name='squarepick[]' value='2-2' />
  <label class='sorttile' for='2-2' style='background-color:#0000FF;'>
    <input type='hidden' name='2-2' value='#0000FF' />
  </label>
  <input id='2-3' class='square' type='checkbox' name='squarepick[]' value='2-3' />
  <label class='sorttile' for='2-3' style='background-color:#FF00FF;'>
    <input type='hidden' name='2-3' value='#FF00FF' />
  </label>
  <br/>
  <input id='3-1' class='square' type='checkbox' name='squarepick[]' value='3-1' />
  <label class='sorttile' for='3-1' style='background-color:#000000;'>
    <input type='hidden' name='3-1' value='#000000' />
  </label>
  <input id='3-2' class='square' type='checkbox' name='squarepick[]' value='3-2' />
  <label class='sorttile' for='3-2' style='background-color:#999999;'>
    <input type='hidden' name='3-2' value='#999999' />
  </label>
  <input id='3-3' class='square' type='checkbox' name='squarepick[]' value='3-3' />
  <label class='sorttile' for='3-3' style='background-color:#FFFFFF;'>
    <input type='hidden' name='3-3' value='#FFFFFF' />
  </label>
</form>

基本上每个彩色方块代表一个复选框，允许您选择任意两个方框。此外，每个框都有一个与之关联的隐藏输入字段。

为简化演示目的，演示使用“background-color”，但我的实际代码使用“background-image”。

我想做的是，当选择两个方格时，在选择第二个方框时，两个方框交换彼此的“背景图像”值，有效地使它看起来像两个方格交易的位置。

此外，我还需要交换隐藏类型输入字段的值。

最后，应该取消选中这两个复选框，尽管这部分很容易。我遇到的问题是前两部分。我以为我已经知道如何使它工作，但我的实验还没有解决（我的javascript知识仍然相当粗糙）。

关于如何使这项工作的任何想法？

Answer 1

您需要做的第一件事是设置一个事件监听器，以便您知道何时检查了一个框。您需要做的第二件事是跟踪检查的内容。最后，您希望根据检查的内容执行一系列操作。

var formEl = document.getElementById("sortus");

// Track our checked boxes
var checked = [];

var swap = function () {
  var boxA = checked[0];
  var boxB = checked[1];
  // Get hidden fields using checkbox ID
  var hiddenA = document.getElementsByName(boxA.id)[0];
  var hiddenB = document.getElementsByName(boxB.id)[0];
  var boxAbackgroundImage = boxA.style.backgroundImage;
  var hiddenAvalue = hiddenA.value;
  // Switch images!
  boxA.style.backgroundImage = boxB.style.backgroundImage;
  boxB.style.backgroundImage = boxAbackgroundImage;
  // Swap hidden input values
  hiddenA.value = hiddenB.value;
  hiddenB.value = hiddenAvalue;
};

var reset = function () {
  for (var i = 0; i < checked.length; i++) {
      checked[i].checked = false;
  }
  checked = [];
};

var isDuplicate = function (el) {
    for (var i = 0; i < checked.length; i++) {
        if (checked[i] === el) {
            return true;
        }
    }
    return false;
};

formEl.addEventListener("click", function (e) {
    var el = e.target;
    // Was it a checkbox clicked?
    if (el.className == "square") {
        // Is it already checked?
        if (!isDuplicate(el)) {
            checked.push(el);
            if (checked.length === 2) {
                swap();
                reset();
            }
        }
    }
});

我没有测试这段代码，但我希望它能让你清楚地了解你需要做什么。

Answer 2

上述要求的基本功能可在以下链接

中找到

Fiddler Link

function checkboxlimit(checkgroup) 
{
    var checkgroup = checkgroup
    for (var i = 0; i < checkgroup.length; i++) {
        checkgroup[i].onclick = function() 
        {
        var checkedcount = 0
        for (var i = 0; i < checkgroup.length; i++)
            checkedcount += (checkgroup[i].checked) ? 1 : 0
        if (checkedcount > 2) {
            this.checked = false
        }
        swapImage();
    }
    }
}

function swapImage()
{
    var prevStyle="";
    var prevId="";
    for (var i = 0; i < sort_checkboxes.length; i++) {
        if(sort_checkboxes[i].checked)
        {
            if(prevId!="")
            {
document.getElementById(prevId).nextElementSibling.style.backgroundColor = sort_checkboxes[i].nextElementSibling.style.backgroundColor;
document.getElementById(prevId).nextElementSibling.children[0].value = sort_checkboxes[i].nextElementSibling.style.backgroundColor;
sort_checkboxes[i].nextElementSibling.style.backgroundColor = prevStyle;
sort_checkboxes[i].nextElementSibling.children[0].value = prevStyle;

prevStyle = "";
prevId = "";
            }
            else
            {
                prevId=sort_checkboxes[i].id;
                prevStyle = sort_checkboxes[i].nextElementSibling.style.backgroundColor;
            }
        }
    }
}

在两个已检查元素之间交换数据

2 个答案: