Question

当我选中一个复选框时，我得到了如何检查/取消选中或隐藏/显示但我正在寻找的是当我有5个复选框时，当用户点击快餐时，快餐，餐饮，结转，交付和栏，禁用其他复选框，当用户选中Catering时，休息是禁用的，但是当用户选中Carryout时，只有Fastfood和Catering被禁用。然后，当用户取消选中时，所有复选框都会返回以启用/显示。谢谢！ -

这是我的代码：

<script type="text/javascript">
function HideOrShowStuff(controlToHide1)
{


       if (document.getElementById)
   {
          if(controlToHide1==1)
      {
      document.getElementById('2').disabled=true;
        document.getElementById('3').disabled = true;
          document.getElementById('4').disabled = true;
           document.getElementById('5').disabled = true;
           document.getElementById('1').disabled = false;
             }
        if(controlToHide1==2)
      { 
         document.getElementById('1').disabled=true;
        document.getElementById('2').disabled = false;
          document.getElementById('4').disabled = true;
           document.getElementById('5').disabled = true;
           document.getElementById('3').disabled = true;
              }
                  if(controlToHide1==3)
      { 
          document.getElementById('1').disabled=true;
        document.getElementById('2').disabled = true;
          document.getElementById('4').disabled = false;
           document.getElementById('5').disabled = false;
           document.getElementById('3').disabled = false;
              }
                  }
        }

</script>

 Type of restaurant are you?<br /> <br /> 
<input type="checkbox" name="restaupop1"  id="1"value="fastfood" onclick="HideOrShowStuff(1)"    <?PHP print $fastfood_status; ?>> Fast Food/Drive Thru  <br />
<input type="checkbox" name="restaupop2" id="2"value="catering"  onclick="HideOrShowStuff(2); setVisible('restaubar');"   <?PHP print $catering_status; ?>> Catering<br />
<input type="checkbox"  name="restaupop3" id="3" value="carryout"  onclick="HideOrShowStuff(3)"   <?PHP print $carryout_status; ?>> Carry-Out<br />
<input type="checkbox" name="restaupop4" id="4"value="delivery"   onclick="setVisible('barpop1');"  <?PHP print $delivery_status; ?>> Delivery<br />
<input type="checkbox" name="restaupop5" id="5"value="bargrill" onclick="setVisible('restaubar');"     <?PHP print $bargrill_status; ?>>Bar/Grill

Answer 1

总而言之，并不太难。

http://jsfiddle.net/A5TGf/19/

HTML：

<form action="./" id="checkForm" method="post">
    <fieldset>
        <label for="foo">foo</label>
        <input type="checkbox" id="foo" value="foo" />
        <label for="bar">bar</label>
        <input type="checkbox" id="bar" value="bar" />
        <label for="baz">baz</label>
        <input type="checkbox" id="baz" value="baz" />
    </fieldset>
</form>

JS：

var form = document.getElementById("checkForm");
form.onclick = delegateFormClick;

addChangeHandlers(form);

function addChangeHandlers(form)
{
   for(var i=0;i<form.elements.length;i++)
   {
       var element = form.elements[i];
       if(element.tagName === "INPUT" && element.type === "checkbox")
       {
           if(!element.onchange)
           {
               element.onchange = checkBoxChanged;   
           }
       }
   }  
}

function delegateFormClick(evt)
{
    var target;
    if(!evt)
    {
        //Microsoft DOM
        target = window.event.srcElement;
    }else if(evt)
    {
        //w3c DOM
        target = evt.target;
    }
    if(target.nodeType === 1 && target.tagName === "INPUT" && target.type === "checkbox")
    {
        if(target.checked)
        {
            disableCheckBoxes(target.id, document.getElementById("checkForm"));
        }else if(!target.checked)
        {
            enableCheckBoxes(document.getElementById("checkForm"));
        }  
    }
}

function checkBoxChanged()
{
    if(this.checked)
    {
       disableCheckBoxes(this.id, document.getElementById("checkForm"));
    }else if(!this.checked)
    {
        enableCheckBoxes(document.getElementById("checkForm"));  
    }
}

function disableCheckBoxes(id, form)
{
    var blacklist = [];
    if(id)
    {
        switch(id)
        {
            case "foo":
            blacklist = ["bar", "baz"];
            break;
            case "bar":
            blacklist = ["foo"];
            break;
            case "baz":
            blacklist = ["foo", "bar"];
            break;
        }   
    }else
    {
        throw new Error("id is needed to hard-wire input blacklist");   
    }
    for(var i=0;i<blacklist.length;i++)
    {
        var element = document.getElementById(blacklist[i]);
        if(element && element.nodeType === 1)
        {
            //check for element
            if(element.tagName === "INPUT" && element.type === "checkbox" && !element.checked)
            {
                element.disabled = "disabled";
            }
        }else if(!element || element.nodeType !== 1)
        {
            throw new Error("input blacklist item does not exist or is not an element");
        }
    }   
}

function enableCheckBoxes(form)
{
    for(var i=0;i<form.elements.length;i++)
    {
        var element = form.elements[i];
        if(element.tagName === "INPUT" && element.type === "checkbox" && !element.checked)
        {
            element.disabled = "";
        }
    }   
}

关于我正在做的事情的一些快速说明：

我正在使用事件委派来最小化事件处理程序的数量。表单侦听冒泡的click事件，然后根据单击的元素及其checked DOM属性调用函数。
我正在浏览HTMLFormElement。elements集合，以便轻松访问复选框。
如果复选框不是目标复选框，我会将disabled DOM属性设置为“已禁用”。
如果没有选中复选框，我会在复选框上将disabled DOM属性设置为“”（空字符串）。
如果用户通过选项卡/输入或通过onchange处理程序选择其他方法来选择复选框，这也有效。
此代码应该在IE中工作，虽然我在工作中遇到了一些严重的IE问题，所以我将不得不稍后进行测试。
它使用“黑名单”，这是一个数组，其中包含单击相应复选框时不希望启用的复选框的ID。

如果您正在寻找更远的东西，请告诉我。

Answer 2

所以我还没有完全掌握你想要到达的逻辑。但是，如果您想要判断复选框是否未选中或已选中你可以像这样测试它

 function hideOrShowStuff(box, controlToHide1) {
   if(box.checked) {
     // the hide logic
   } else {
    // the show logic
   }
 }

您还需要传递参考框像这样

 onclick="HideOrShowStuff(this, 1)"

希望有所帮助

Answer 3

你可以使用jQuery，它（可能）会让你的生活更轻松。查看这些文章，了解如何实现您的目标（使用jQuery）：

USING JQUERY TO SHOW/HIDE FORM ELEMENTS BASED ON A CHECKBOX SELECTION

Checkboxes + Jquery hide/show

NB：其他框架可用。根据个人喜好选择。

Answer 4

使用框架或工具包（如jQuery）将使生活更轻松，但最好还是学习如何使用javascript操作DOM，然后再转到工具包。就像在使用计算器之前学习添加一样。

处理此问题的最佳方法是查看复选框的状态。如果（document.myform.box2.checked == true），则根据复选框的状态做出决策。上面的功能只是修改了复选框，而不知道它们的状态。最好将（this）传递给函数，然后遍历DOM。当它作为参数进入函数时，“this”将成为复选框。所以你的函数会说“好吧，我已经把复选框”1“传递给了我，现在我的其他复选框的状态是什么？”。

Answer 5

试试此代码

 <script>
            function uncheck0(){
                for(var ii=1; ii<=3; ii++){
                    if(document.getElementById("q6_"+ii).checked==true){
                       document.getElementById("q6_"+ii).checked=false;
                    }
                }
            }
            function uncheck(id, from, to){
                for(var ii=from; ii<=to; ii++){
                    if(document.getElementById(id+ii).checked==true){
                       document.getElementById(id+ii).checked=false;
                    }
                }
            }
        </script>

Answer 6

js fiddle demo

function changeCheckBox() {
     try {

         var max = document.mainForm.serNo.length;
         var count = 0;

         for (var i = 0; i < max; i++) {
             if (document.mainForm.serNo[i].checked == true) {
                 count++;
                 serNoChecked = i;
             }
         }
         if (count == 1) {
             for (var i = 0; i < max; i++) {
                 if (document.mainForm.serNo[i].checked == false) {
                     document.mainForm.serNo[i].disabled = true;
                 }
             }
         } else if (count == 0) {
             for (var i = 0; i < max; i++) {
                 document.mainForm.serNo[i].disabled = false;
             }
         }

         if (null == max) return false;
         if (count == 0) {
             return true;
         } else if (count > 0) {
             return false;
         }

     } catch (e) {
         alert(e.message);
     }
 }



<form  name="mainForm" method="GET" action="Controller">
<TD STYLE="width:10px">
    <input type="checkbox" id="serNo" name="serNo" value="" onclick="changeCheckBox()" />
    <input type="checkbox" id="serNo" name="serNo" value="" onclick="changeCheckBox()" />
    <input type="checkbox" id="serNo" name="serNo" value="" onclick="changeCheckBox()" />
</TD>
</form>

如果选中另一个复选框，如何启用/禁用复选框？

6 个答案: