选择单选按钮时必须输入文本框答案

【问题标题】：Textbox compulsory when radio button is selected选择单选按钮时必须输入文本框
【发布时间】：2017-07-06 06:18:08
【问题描述】：

我有一个视图，其中添加到电子有 2 个单选按钮是和否。和一个提交按钮。是时单击单选按钮。数量文本框不应为空。但如果没有单击单选按钮，它可以为空。当单击提交按钮并选择是单选按钮时，此功能应该起作用。

 <HTML>
    <head>
    radio
    </head>
    <body>
    <form id=radio>
     Add to electronic  <input type="radio" name="yes"onclick="validate(_this)"id="yes"/>Yes<input type="radio" name="yes" id="no" />No<br />
    <label>Quantity</label><input type="text"size="25"name="dir"id="dir" required/> 
<button type=submit name=insert>insert</button>
</body>
<div>
<script src="~/Scripts/radiobuttonvalidation.js"></script>
</div>
</html>

我是 mvc 和 javascript 的新手。请也帮助我处理javascript代码，以及我应该将它与我的视图链接的方式。 Javascript：

function validate(_this) {
    if ($(_this).attr('id') == "yes") {
        $('#dir').attr('required');
        alert("Text Box required");
    }
    else {
        $('#dir').removeAttr('required');
        alert("Text Box not required");
    }
}

【问题讨论】：

您的问题描述不清楚。明确你需要什么。
“yes”的 id 或名称不是一个好主意，考虑“dirRequired”或类似的 required 属性应该从复选框设置，而不是表单提交，逻辑可以是this.form.dir.required = this.form.dirRequired.checked 或类似的（其中 this 是复选框）。

标签： javascript html asp.net asp.net-mvc

【解决方案1】：

你有几个问题

不要传递_this它不是一个有效的变量
您只测试一台收音机 - 所以“否”永远不会删除所需的
您的 HTML 无效 - 您需要关闭表单并且在 </body> 之后没有除 </html> 之外的任何 html
如果您希望输入允许为空，则必须删除必需项（如果两者都未选中）

这是一个有效且不引人注目的版本。如果你决定使用 jQuery，你就没有理由使用内联事件处理程序

$(function() {
  $("[name='yes']").on("click", function() {
    if (this.id == "yes") {
      $('#dir').attr('required', true);
      console.log("Text Box required");
    } else {
      $('#dir').removeAttr('required');
      console.log("Text Box not required");
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<form id=radio>
  Add to electronic <input type="radio" name="yes" id="yes" />Yes<input type="radio" name="yes" id="no" />No<br />
  <label>Quantity</label><input type="text" size="25" name="dir" id="dir" />
  <button type=submit name=insert>insert</button>
</form>

RobG 和我建议使用复选框，我会将数量隐藏到：

function validate() {
  var $check = $("#addToElectronic"), checked = $check.is(":checked");
  $("#quant").toggle(checked);
  $('#dir').attr('required', checked);
}
$(function() {
  $("#addToElectronic").on("click",validate);
  validate();
});

#quant { display:none }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<form id=radio>
  Add to electronic <input type="checkbox" id="addToElectronic" value="yes" />Yes<br/>
  <div id="quant">
  <label>Quantity</label><input type="text" size="25" name="dir" id="dir" />
  </div>
  <button type=submit name=insert>insert</button>
</form>

【讨论】：

如果使用复选框而不是收音机，则只需要一个，并且点击监听器非常简单，基本上是dir.required = checkbox.checked（作为伪代码）。 ;-)
当然——那更好——但这可能不是企业想要的

【解决方案2】：

您需要为文本框是否为空添加验证

function validate(_this) {
  if ($(_this).attr('id') == "yes") {
    if (!$('#dir').val().trim()) {
      $('#dir').attr('required');
      console.log("Text Box  required");
    }
  } else {
    $('#dir').removeAttr('required');
    console.log("Text Box not required");
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id=radio>
  Add to electronic <input type="radio" name="yes" onclick="validate(this)" id="yes" />Yes<input type="radio" name="yes" id="no" />No<br />
  <label>Quantity</label><input type="text" size="25" name="dir" id="dir" required/>
  <button type=submit name=insert>insert</button>
</form>

【讨论】：

添加必需的属性如果为空将显示 HTML5 错误 - 这可能就是想要的
您的代码不会阻止他们在单击按钮后添加空格

【解决方案3】：

我可以说您发布的代码只需稍作改动即可正常工作

function validate(_this) {
    if ($(_this).attr('id') == "yes") {
        $('#dir').attr('required', true);
        alert("Text Box required");
    }
    else {
        $('#dir').removeAttr('required', false);
        alert("Text Box not required");
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
   <form id="radio">
     Add to electronic  
     <input type="radio" name="yes" onclick="validate(this)" id="yes"/>Yes
     <input type="radio" name="yes" id="no" onclick="validate(this)"/> No<br />
       <label>Quantity</label>
    <input type="text" size="25" name="dir" id="dir"/> 
    <button type="submit" name="insert">insert</button>
</form>

您在id 和<button> 属性中缺少双引号。
你错过了</form>关闭标签
validate(_this)里面的radio输入必须是validate(this)
$('#dir').attr('required'); 应该是 $('#dir').attr('required', boolean_value);

【讨论】：

为什么把onclick函数改成$("[name='yes']").on("click", function() {？我们还是可以用onclick，尽量不要改OP的最大代码。
因为我们应该教正确的编码。如果您决定使用 jQuery，则不应使用内联事件处理程序。 DRY - 不要重复自己。

【解决方案4】：

错字：onclick="validate(_this)这应该是onclick="validate(this)"

function validate(_this) {

    if ($(_this).attr('id') == "yes") {
        $('#dir').attr('required');
        alert("Text Box required");
    }
    else {
        $('#dir').removeAttr('required');
        alert("Text Box not required");
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id=radio>
     Add to electronic  <input type="radio" name="yes"onclick="validate(this)"id="yes"/>Yes<input type="radio" name="yes" id="no" />No<br />
    <label>Quantity</label><input type="text"size="25"name="dir"id="dir"/> 
<button type=submit name=insert>insert</button>
</body>

【讨论】：

点击“否”，点击是后提交
还是不行。允许我在字段中是和无时提交 - 您需要将所需设置为某事

【解决方案5】：

您只在第一个单选按钮上调用您的验证功能，只需在两个单选按钮上调用它。或者您可以使用 jQuery 将事件添加到您的单选按钮。另一件事是您的表单中没有为单选按钮指定名称，添加一个用于将数据发送到服务器。

$(function(){
  $("input[name=add_to_ele]").change(function(){
    if($(this).val()=="yes")
    {
      $('#dir').attr('required','required');
        alert("Text Box required");
    }
    else
    {
      $('#dir').removeAttr('required');
        alert("Text Box not required");
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form >
Add to electronic  <input type="radio" name="add_to_ele" id="yes" value="yes"/> Yes <input value="no" type="radio" name="add_to_ele" id="no" />No<br />
    <label>Quantity</label><input type="text"size="25" name="dir" id="dir" required/> 
<button type=submit name=insert>insert</button>
</form >

【讨论】：