Question

我有一个包含多组单选按钮的表单。当我选择一个单选按钮时，它会在同一页面上输出。

我想为uniform添加一个单选按钮。选择Other时，应显示文本框，以便用户输入文字。

文本框中的用户输入将以相同的顺序显示。

＆＃13;

Other

＆＃13;

 
$(document).ready(function() {
    $("input").click(function() {
        $("#result").html(function() {
            var str = '';
            $(":checked").each(function() {
                str += $(this).val()+ " ";
            });
            return str;
        });
    });
});

＆＃13;

<table width="100%">
                    <tr>
					    <td><input type="radio" name="RadioGroup1" id="a1" value="Accomplished" /><label for="accomplished">Accomplished</label></td>
                        <td><input type="radio" name="RadioGroup1" id="a2" value="Exciting" /><label for="exciting">Exciting</label></td>
                        <td><input type="radio" name="RadioGroup1" id="a3" value="Dynamic" /><label for="dynamic">Dynamic</label></td>
                        <td><input type="radio" name="RadioGroup1" id="a4" value="Holistic" /><label for="holistic">Holistic</label></td>
                        <td><input type="radio" name="RadioGroup1" id="a5" value="Animated" /><label for="animated">Animated</label></td>
					</tr>
  </table>

<table width="100%">
                    <tr>
					    <td><input type="radio" name="RadioGroup2" id="b1" value="CEO" /><label for="ceo">CEO</label></td>
                        <td><input type="radio" name="RadioGroup2" id="b2" value="Account Manager" /><label for="a-manager">Account Manager</label></td>
                        <td><input type="radio" name="RadioGroup2" id="b3" value="Customer Service" /><label for="c-services">Customer Service</label></td>
                        <td><input type="radio" name="RadioGroup2" id="b4" value="Project Manager" /><label for="p-manager">Project Manager</label></td>
					</tr></table>

Answer 1

您可以在其他<input type="text">中添加一个<td>，并在用户选择其他<radio>按钮时将其显示。我用CSS完成了它。我已对此进行了更改：将other类添加到<td>。

td.other div.text{
  display: none;
}

td.other input[type=radio]:checked+label + div.text{
  display:block;
}

每当用户选择“其他”时，它会显示<input type="text">以输入新值。用户可以在用户按键时实时查看结果。

以下是摘录：

console.clear();

function inputSelected() {
  $("#result").html(function() {
    var str = '';
    $(":checked").each(function() {
      str += $(this).val() + " ";
    });
    return str;
  });
}

$(document).ready(function() {
  $("input[type=radio]").click(inputSelected);

  $("td.other").click(function() {
    $(this).find('input[type=text]').focus();
  });

  $("td.other input[type=text]").keyup(function(e) {
    var value = $(this).val().trim();

    if (value.length <= 0) {
      value = 'Other';
    }


    $(this).parent().siblings("input[type=radio]").val(value);
    $(this).parent().siblings("label").html(value);

    inputSelected();

  })
});

//$(".other label").click();

td.other div.text {
  display: none;
}
td.other input[type=radio]:checked+label + div.text {
  display: block;
}
td.other input[type=radio]:checked+label {
  display: none;
}

<!DOCTYPE html>
<html>

<head>
  <meta name="description" content="Jquery: Add new radio field for selection">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>

</head>

<body>
  <table width="100%">
    <tr>
      <td>
        <input type="radio" name="RadioGroup1" id="a1" value="Accomplished" />
        <label for="a1">Accomplished</label>
      </td>
      <td>
        <input type="radio" name="RadioGroup1" id="a2" value="Exciting" />
        <label for="a2">Exciting</label>
      </td>
      <td>
        <input type="radio" name="RadioGroup1" id="a3" value="Dynamic" />
        <label for="a3">Dynamic</label>
      </td>
      <td>
        <input type="radio" name="RadioGroup1" id="a4" value="Holistic" />
        <label for="a4">Holistic</label>
      </td>
      <td>
        <input type="radio" name="RadioGroup1" id="a5" value="Animated" />
        <label for="a5">Animated</label>
      </td>
      <td class="other">
        <input type="radio" name="RadioGroup1" id="a6" value="Other" />
        <label for="a6">Other</label>
        <div class="text">
          <input type="text" id="other1" value="Other">
        </div>
      </td>
    </tr>
  </table>

  <table width="100%">
    <tr>
      <td>
        <input type="radio" name="RadioGroup2" id="b1" value="CEO" />
        <label for="b1">CEO</label>
      </td>
      <td>
        <input type="radio" name="RadioGroup2" id="b2" value="Account Manager" />
        <label for="b2">Account Manager</label>
      </td>
      <td>
        <input type="radio" name="RadioGroup2" id="b3" value="Customer Service" />
        <label for="b3">Customer Service</label>
      </td>
      <td>
        <input type="radio" name="RadioGroup2" id="b4" value="Project Manager" />
        <label for="b4">Project Manager</label>
      </td>
      <td class="other">
        <input type="radio" name="RadioGroup2" id="b5" value="Other">
        <label for="b5">Other</label>
        </input>
        <div class="text">
          <input type="text" id="other2" value="Other">
        </div>
      </td>
    </tr>
  </table>

  <div id="result">
  </div>
</body>

</html>

在此代码段中，我更新了for中的<label>以引用<radio>。

其他文本框

1 个答案: