【问题标题】:Is it possible to make a radio button de-selectable in JSP (like checkbox)是否可以在 JSP 中取消选择单选按钮(如复选框)
【发布时间】:2012-08-31 09:38:11
【问题描述】:

是否可以在 JSP 中取消选择单选按钮(如复选框)?

我有一个带有单选按钮的表格的页面。如果我在选定的收音机上单击它,我想取消选择单选按钮。这是代码

<tr>                    
<TD><INPUT type="radio" name="Radios" value="someValue"></td>
<TD>someValue</td>
</tr>

提前致谢。

【问题讨论】:

  • 单选按钮不应留空 - 要么提供默认 - N/A 选项,要么如果所有选项都未选中,请使用复选框。见first answer here

标签: javascript jsp


【解决方案1】:

您可以使用 Javascript 根据鼠标单击事件设置/切换属性 checked 值为 "checked"(按钮被选中)或 ""(空 stinrg = 按钮未被选中)。这是reference doc about radio buttons

请记住,一次只能选择组中的一个单选按钮。

【讨论】:

    【解决方案2】:

    问题是未选中的按钮在单击后立即在 onclick 处理程序运行之前变为选中状态。因此,即使在用户单击按钮之前未选中该按钮,它也会在处理程序启动时被选中。所以下面的代码是行不通的。

    function toggle(e)
    {
        e.checked = !e.checked;
    }
    

    所以有一个技巧可以避免这个问题。我们只是添加一个计算点击奇偶性的字段。

    function toggleRadioButton(e)
    {
        if(e.parity==undefined)
        {
            e.parity = false;
        }
        e.parity = !e.parity;
        e.checked = e.parity;
    
        //Fix parity of other buttons of this group which are unchecked automatically
        if(e.checked)
        {
            var buttonsInGroup = document.getElementsByName(e.name);
            for(var i=0; i<buttonsInGroup.length; i++)
            {
                if(buttonsInGroup[i]!=e)
                {
                    buttonsInGroup[i].parity = false;
                }
            }
        }
    }
    

    HTML 部分将具有标准的 onclick 处理程序:

    <INPUT type="radio" name="Radios" value="someValue" onclick="toggleRadioButton(this)"/>
    

    但是,以编程方式更改按钮的状态时可能会出现一些完整性问题。我真的不喜欢这段代码,但没有看到任何其他解决方案。

    最后我的建议是不要以这种奇怪的方式使用单选按钮:)。

    【讨论】:

      【解决方案3】:

      试试这个 javascript 代码:

      var firstClick = true;
      function tick(element){
       if(!firstClick){
           if(element.checked){
               element.checked = false;
               firstClick = true;
           }
       }else{
           firstClick = false;
       }
      
      }
      

      然后添加 onclick 属性

      <tr>                    
      <TD><INPUT type="radio" name="Radios" value="someValue" onclick="tick(this);"></td>
      <TD>someValue</td>
      </tr>
      

      注意:这未经测试。但这应该可行。

      【讨论】:

      • 它不起作用,因为 onchange 处理程序在 onclick 之前触发,因此该按钮将一直处于未选中状态。我认为最好在发布之前检查解决方案(这对 JS 来说并不难)。此外,名为“checked”的参数不是“selected”。
      • 对不起。我忘了考虑事件中的第一次点击。我编辑了脚本并进行了测试。现在可以正常工作了。
      • 好多了! :) 但是当单选组中有多个按钮(具有相同的名称)时,有一个选项。在这种情况下,它们都共享由 firstClick 变量确定的状态。我建议您将 firstClick 字段绑定到按钮本身
      猜你喜欢
      • 2014-08-07
      • 1970-01-01
      • 2014-05-23
      • 2019-06-16
      • 1970-01-01
      • 2013-08-09
      • 2021-04-26
      • 2012-02-21
      • 2011-07-17
      相关资源
      最近更新 更多