Question

我有一个函数，如果没有选中它们，最初应禁用复选框组。这个函数设计用于onClick（），我从复选框元素传递一个关于Click（this）的参数。现在我需要在页面加载时触发此函数，我需要从数据库传递值。棘手的部分是我有一组以上的复选框。以下是我的HTML布局示例：

<tr>
    <td>
       <input type="checkbox" name="o_outcomeCk" id="o_firstOutcome" value="1" tabIndex="1" <cfif Trim(myData.o_outcomeCk) EQ 1>checked</cfif> onClick="ckChange('o_outcomeCk', 1)">First Outcome
    </td>
    <td>
       <input type="checkbox" name="o_outcomeCk" id="o_secondOutcome" value="2" tabIndex="1" <cfif Trim(myData.o_outcomeCk) EQ 2>checked</cfif> onClick="ckChange('o_outcomeCk', 2)">Second Outcome
    </td>
</tr>
<tr>
    <td>
       <input type="checkbox" name="o_progressCk" id="o_firstProgress" value="1" tabIndex="1" <cfif Trim(myData.o_progressCk) EQ 1>checked</cfif> onClick="ckChange('o_progressCk', 1)">First Progress
    </td>
    <td>
       <input type="checkbox" name="o_progressCk" id="o_secondProgress" value="2" tabIndex="1" <cfif Trim(myData.o_progressCk) EQ 2>checked</cfif> onClick="ckChange('o_progressCk', 2)">Second Progress
    </td>
</tr>

在每个onClick函数上面，我试图传递复选框名称和值。当用户单击复选框时，我应该禁用未选中的复选框。此外，当我从数据库加载页面值时，将决定选中哪个复选框，此时也应禁用一个不检查的复选框。这是我的Javascript函数：

function ckChange(ckType, ckVal){
    var ckName = document.getElementsByName(ckType);
    var numChecked = 0;
    var index = 0;

    for(var i=0; i < ckName.length; i++){
        if(ckName[i].checked){
            numChecked++;
            index = i;
        }
    }

    for(var i=0; i < ckName.length; i++){
        if(numChecked == 0){
            ckName[i].disabled = false;
        }else{
            if(i != index){
                ckName[i].disabled = true;
            }
        }
    }
}

由于某种原因，我的功能没有按预期工作。我每次在点击时调用这个功能时都会想到传递id但是那样在页面加载时它会如何工作？以下是我在用户访问页面时调用该函数的方法：

<cfoutput>
    ckChange('o_outcomeCk','#Trim(myData.o_outcomeCk)#');
    ckChange('o_progressCk','#Trim(myData.o_progressCk)#');
</cfoutput>

在这里，我能够从数据库传递名称和值。如果能提高效率，我会提出建议和不同的方法。我目前的代码不起作用。谢谢。

Answer 1

这是一个有效的解决方案。我不得不删除你的ColdFusion代码，因为代码编辑器不支持它，我插入了一些临时JavaScript（前四个语句）来模拟一些导入的数据。

如果选中其中一个复选框，则另一个复选框将被禁用。如果两者都未选中，则它们都将被启用。如果您向任一组添加更多复选框，此解决方案也应该是可伸缩的。

尝试示例以确保它能够满足您的需求。它正在模拟o_outcomeCk中的第一个框和o_progressCk中的第二个框。

// simulate imported data & CF checkbox selecting
document.getElementsByName("o_outcomeCk")[0].checked = true;
document.getElementsByName("o_progressCk")[1].checked = true;
ckChange('o_outcomeCk',1);
ckChange('o_progressCk',2);


function ckChange(ckType, ckVal){
  var ckName = document.getElementsByName(ckType);
  var numChecked = 0;   // counter
  var index = 0;        // which index is checked
  for(var i = 0; i < ckName.length; i++){
    // check which boxes in this set are checked
    if (ckName[i].checked) {
      // if the box that was clicked is checked
      numChecked++;
      index = i;
    }
  }
  if (numChecked == 0) {
    // enable both boxes
    for (var i = 0; i < ckName.length; i++) {
      ckName[i].disabled = false;
    }
  }
  else {
    // disable other box
    for (var i = 0; i < ckName.length; i++) {
      if (i != index) {
        ckName[i].disabled = true;
      }
    }
  }
}

<table>
<tr>
    <td>
       <input type="checkbox" name="o_outcomeCk" id="o_firstOutcome" value="1" tabIndex="1" onClick="ckChange('o_outcomeCk', 1)">First Outcome
    </td>
    <td>
       <input type="checkbox" name="o_outcomeCk" id="o_secondOutcome" value="2" tabIndex="1" onClick="ckChange('o_outcomeCk', 2)">Second Outcome
    </td>
</tr>
<tr>
    <td>
       <input type="checkbox" name="o_progressCk" id="o_firstProgress" value="1" tabIndex="1" onClick="ckChange('o_progressCk', 1)">First Progress
    </td>
    <td>
       <input type="checkbox" name="o_progressCk" id="o_secondProgress" value="2" tabIndex="1" onClick="ckChange('o_progressCk', 2)">Second Progress
    </td>
</tr>
</table>

更新：以下是JavaScript的替代版本，它只使用一个for循环。如果您想使用它，只需将其换成上面的JavaScript代码即可。唯一需要更改的HTML是每个复选框的onclick属性，应将其更改为onClick="ckChange(this)"。

// simulate imported data & CF checkbox selecting
document.getElementsByName("o_progressCk")[1].checked = true;
ckChange("o_outcomeCk", 0);
ckChange("o_progressCk", 2);

function ckChange(that, val){
    var isChecked = false;
    var wasClicked = false;
    var index = 0;
    var ckType = that;
    if (!!that.type) {    // if called from a click
      ckType = that.name;
      wasClicked = true;
      if (!!that.checked) {
        index = that.value - 1;
        isChecked = true;
      }  
    }

    var ckName = document.getElementsByName(ckType);

    for(var i=0; i < ckName.length; i++){
        if (isChecked) {
          // if called from click and box was checked
          if (index != i) {
            ckName[i].disabled = true;
          }
        }
        else if (wasClicked) {
          // if called from click and box was unchecked
          ckName[i].disabled = false;
        }
        else {
          // if on load
          if (val != 0) {
            // one is checked
            if (i != val - 1) {
              ckName[i].disabled = true;
            }
          }
          else {
            // none checked
            ckName[i].disabled = false;
          }          
        }          
    }
}

将名称和值传递给JavaScript onClick函数？

1 个答案: