检查单选按钮值是否选中答案

【问题标题】：Check if Radio Button Value checked检查单选按钮值是否选中
【发布时间】：2011-03-25 16:21:51
【问题描述】：

<tr>
   <td align="left">
         <input type="radio" name="radio_1" value="1" />Public
         <input type="radio" name="radio_1" value="2" />Not Public
         <input type="radio" name="radio_1" value="3" />Confidential
   </td>
</tr>
<tr>
   <td align="left">
         <input type="radio" name="radio_2" value="1" />Public
         <input type="radio" name="radio_2" value="2" />Not Public
         <input type="radio" name="radio_2" value="3" />Confidential
   </td>
</tr>
<tr>
   <td align="left">
         <input type="radio" name="radio_3" value="1" />Public
         <input type="radio" name="radio_3" value="2" />Not Public
         <input type="radio" name="radio_3" value="3" />Confidential
   </td>
</tr>

你好，

如果我选择第一行单选按钮中的第一个选项。在第二行中，我不检查第一个选项，因为第一个选项已经在第一行中检查过。我需要一个 jquery 验证

请有人帮助我！

【问题讨论】：

看来您实际上希望允许用户优先考虑值列表。就像“公共”要排在第一位，“机密”排在第二位等等。这是任务吗？
如果您能够使用 javascript，这真的很简单。这是一个选择吗？

标签： html radio-button

【解决方案1】：

您需要重新排列单选按钮的名称/值。

<tr>
   <td align="left">
         <input type="radio" name="radio_1" value="1" />Public
         <input type="radio" name="radio_2" value="1" />Not Public
         <input type="radio" name="radio_3" value="1" />Confidential
   </td>
</tr>
<tr>
   <td align="left">
         <input type="radio" name="radio_1" value="2" />Public
         <input type="radio" name="radio_2" value="2" />Not Public
         <input type="radio" name="radio_3" value="2" />Confidential
   </td>
</tr>
<tr>
   <td align="left">
         <input type="radio" name="radio_1" value="3" />Public
         <input type="radio" name="radio_2" value="3" />Not Public
         <input type="radio" name="radio_3" value="3" />Confidential
   </td>
</tr>

该值现在表示顺序而不是名称。这要容易得多。无需 JS 验证。

【讨论】：

【解决方案2】：

如果我理解正确，这应该可以工作

function valForm(form) {
var btn1 = parseInt(form.radio_1.value, 10) || 0;
var btn2 = parseInt(form.radio_2.value, 10) || 0;
var btn3 = parseInt(form.radio_3.value, 10) || 0;
btn = (btn1 + btn2 + btn3)
if (btn < 3) alert('Select a button, homie'); 
else alert('Button value ' + btn + ' selected');
}

on jsfiddle. 因为如果所有复选框都被选中，3 是最小可能值，我们检查 btn 是否小于 3 或更多。

<head>
<script type="text/javascript">
function valForm(form) {
var btn1 = parseInt(form.radio_1.value, 10) || 0;
var btn2 = parseInt(form.radio_2.value, 10) || 0;
var btn3 = parseInt(form.radio_3.value, 10) || 0;
btn = (btn1 + btn2 + btn3)
if (btn < 3) alert('Select a button, homie'); 
else alert('Button value ' + btn + ' selected');
}
</script>

</head>
<body>
<form name="theatomicform">
<tr>
   <td align="left">
         <input type="radio" name="radio_1" value="1" />Public
         <input type="radio" name="radio_1" value="2" />Not Public
         <input type="radio" name="radio_1" value="3" />Confidential
   </td>
</tr>
<tr>
   <td align="left">
         <input type="radio" name="radio_2" value="1" />Public
         <input type="radio" name="radio_2" value="2" />Not Public
         <input type="radio" name="radio_2" value="3" />Confidential
   </td>
</tr>
<tr>
   <td align="left">
         <input type="radio" name="radio_3" value="1" />Public
         <input type="radio" name="radio_3" value="2" />Not Public
         <input type="radio" name="radio_3" value="3" />Confidential
   </td>
</tr>
<input value="Validate" type="button" onClick="valForm(theatomicform)">
</form>
</body>

【讨论】：

【解决方案3】：

我想最简单的方法是检查 jquery 中的点击操作

所以你会有..

$(input[type=radio]).click(function() {
  //Store THIS object
  var $this = $(this);

  //Get the id of this radio button
  var $id = $this.attr('id');

  //If radio button is selected
  if($this.is(':selected') {  

    //Disable all other radio buttons with this id.
    $('#' + $id).changeClass("disabled");

  } else {
    //Else it is being unselected, so enable radio buttons with id.
    $('#' + $id).changeClass("enabled");
  }
};

几点..

我不确定if($this.is(':selected') 是否是检查单选按钮的最佳方法，但类似的方法适用于复选框
您可能想要更改属性或 css 属性，而不是更改类。

【讨论】：