链接单选按钮和文本输入

Posted 2023-03-05

【中文标题】链接单选按钮和文本输入

【英文标题】：Linking radio buttons and text inputs

【发布时间】：2012-03-02 04:16:05

【问题描述】：

我正在尝试将无线电输入与指定的文本输入相关联。如图所示，有两种选择。我知道我可以使用for="" 将标签关联到单选输入，但是我怎样才能将它关联到下面的文本输入，反之亦然，所以当我关注文本输入时，如果关注正确的单选按钮？

注意：输入的金额将被插入数据库，因此这是此表格中最重要的部分。目前，如果我点击 $Off，我仍然可以在 %Off 中输入一个数字。我不希望这种情况发生，所以用户不会感到困惑。

我的标记：

<div class="row-fluid control-group">
  <div class="span7 pull-left">
    <label class="radio" for="discount-dollars">
      <input type="radio" name="discount" id="discount-dollars" value="dollars" checked="checked">
      &#36; Off
    </label>
    <div class="input-append">
      <input type="text" name="discount-dollars-amount" id="discount-dollars-amount" class="input-small dollars" placeholder="enter amount">
      <span class="add-on">.00</span>
    </div>
  </div><!-- .span7 .pull-left -->

  <div class="span5">
    <label class="radio" for="discount-percent">
      <input type="radio" name="discount" id="discount-percent" value="percent">
      &#37; Off
    </label>
    <input type="text" name="discount-percent-amount" id="discount-percent-amount" class="input-small percent" placeholder="enter amount" disabled="disabled">
  </div>
</div><!-- .row-fluid .control-group -->

<script type="text/javascript">

$(function ()
  $("form input[type=radio]").click(function ()

  // get the value of this radio button ("dollars" or "percent")
  var value = $(this).val();

  // find all text fields...
  $(this).closest("form").find("input[type=text]")

    // ...and disable them...
    .attr("disabled", "disabled")                     

  // ...then find the text field whose class name matches
  // the value of this radio button ("dollars" or "percent")...
  .end().find("." + value)

    // ...and enable that text field
    .removeAttr("disabled")          
  .end();
  );
);

</script>

【问题讨论】：

这是什么语言/技术？我知道它至少涉及 html，但还有其他涉及吗？

我认为 jQuery 是一个很好的解决方案，但我还不是最擅长构建函数。

【参考方案1】：

您不能使用单个 <label> 元素来标记两个单独的输入。我建议将标签与单选按钮相关联，因为单选按钮是一个很小的点击目标，而标签会扩展该目标。

选择默认选择的收音机之一，可能是“$ Off”。默认禁用其他文本字段：

<div class="row-fluid control-group">
  <div class="span7 pull-left">
    <label class="radio" for="discount-dollars">
      <input type="radio" name="discount" id="discount-dollars" value="dollars" checked="checked">
      &#36; Off
    </label>
    <div class="input-append">
      <input type="text" name="discount-dollars-amount" id="discount-dollars-amount" class="input-small dollars" placeholder="enter amount">
      <span class="add-on">.00</span>
    </div>
  </div><!-- .span7 .pull-left -->

  <div class="span5">
    <label class="radio" for="discount-percent">
      <input type="radio" name="discount" id="discount-percent" value="percent">
      &#37; Off
    </label>
    <input type="text" name="discount-percent-amount" id="discount-percent-amount" class="input-small percent" placeholder="enter amount" disabled="disabled">
  </div>
</div><!-- .row-fluid .control-group -->

然后使用jQuery做这样的事情：

$(function ()
  $("#discount-dollars, #discount-percent").click(function ()

    // get the value of this radio button ("dollars" or "percent")
    var value = $(this).val();

    // find all text fields...
    $(this).closest(".control-group").find("input[type=text]")

      // ...and disable them...
      .attr("disabled", "disabled")                     

    // ...then find the text field whose class name matches
    // the value of this radio button ("dollars" or "percent")...
    .end().find("." + value)

      // ...and enable that text field
      .removeAttr("disabled")          
    .end();
  );
);

基本上，这会监听两个单选按钮上的click 事件。当您单击一个单选时，它会启用其关联的文本字段（即，具有与单选按钮的值匹配的 CSS 类名称的文本字段）并禁用另一个文本字段。这样，除非选中其关联的单选按钮，否则您无法在任一文本字段中输入文本。

【讨论】：

但是 OP 提到他们想要双向。如果您单击文本字段，它也会选择单选按钮。

@Ascalonian 哎呀。我最初错过了。但我觉得这会使 UI 变得不必要地复杂。如果我在两个文本字段中都输入内容会发生什么？然后选中哪个单选按钮？如果我在“$ Off”文本字段中输入内容但选中“% Off”单选按钮会怎样？这种形式变得更容易出错。

这正是我正在寻找的，但无法让它发挥作用。我用我的标记编辑了我的原始帖子。

目前发生的情况是禁用的收音机保持禁用状态，并且它下面的文本输入仍然可以访问。

您禁用了单选按钮，而不是文本字段。我的代码不会尝试启用和禁用单选按钮，只有文本字段。

【参考方案2】：

使用具有 2 种状态的图像单选按钮，选中和未选中，当您单击单选图像时，只需将焦点设置到文本框并切换到您选择的单选图像，反之亦然。

【参考方案3】：

您不能专注于两个元素，它将是输入文本字段或单选按钮。 但是您应该使用 JavaScript 或 jQuery，当您单击单选按钮以关注下面的字段时，或者当您在下面的字段中输入值以检查上面的单选按钮时。

如果您想使用 jquery，这可以帮助您：http://api.jquery.com/val/ 和 http://api.jquery.com/focus/

【参考方案4】：

这是一个非常粗略的草图来帮助你，但你可以做这样的事情（让你遵循一定的命名约定）：

<input type="radio" name="rGroup" id="radioDollarOff" onclick="changeMe(this);"/> &nbsp; <input type="text" name="textDollarOff" id="textDollarOff" onclick="changeMe(this);"/>
<br />
<input type="radio" name="rGroup" id="radioPctOff" onclick="changeMe(this);"/> &nbsp; <input type="text" name="textPctOff" id="textPctOff" onclick="changeMe(this);"/>

<script>
    function changeMe(inField) 
        var fieldId = inField.id;
        var type = fieldId.substring(0, 4);

        if(type == 'text') 
            var name = fieldId.substring(4);
            var radioButton = document.getElementById("radio" + name);
            radioButton.checked = true;
        else 
            var name = fieldId.substring(5);
            var textField = document.getElementById("text" + name);
            textField.focus();
        
    
</script>

【参考方案5】：

jQuery 是你想要的。假设您的元素的 ID 如下：

$ 单选按钮：money-radio $ 文本框：money-text % 单选按钮：百分比单选 % 文本框：百分比文本

...代码可能看起来像这样。这将负责禁用文本框并正确聚焦输入。

<form>
    <table>
        <tr>
            <td>
                <input type="radio" id="money-radio" name="unit" value="money" />
                <label for="money-radio">$ Off</label>
            </td>
            <td>
                <input type="radio" id="percent-radio" name="unit" value="percent" />
                <label for="percent-radio">% Off</label>
            </td>
        </tr>
        <tr>
            <td>
                <input type="text" id="money-text" name="money-off" />
            </td>
            <td>
                <input type="text" id="percent-text" name="percent-off" />
            </td>
        </tr>
    </table>
</form>

<script type="text/javascript">
    $(function() 
        $('#percent-radio, #money-radio').change(function() 
            if ($('#percent-radio').val() == true) 
                $('#percent-text').removeAttr('disabled').focus();
             else 
                $('#percent-text').attr('disabled', 'disabled');
            

            if ($('#money-radio').val() == true) 
                $('#money-text').removeAttr('disabled').focus();
             else 
                $('#money-text').attr('disabled', 'disabled');
            
        ).change();
    );
</script>