只选一个复选框

Question

我想建立一个JavaScript，所以用户只能选择下面提到的一个选项。你可以给我一些指针如何做到这一点，因为我是一个javascript noob。

谢谢！

这是一个菜单

<td><label for="dock_books_search_visible_online"> Visible online?</label></td> 
         <td><input type="checkbox" name="option" value="checkedVisibleOk" id="dock_books_visible_ok" /> </td> 
         <td><label for="dock_books_search_visible_online_yes"> Yes</label></td> 
         <td><input type="checkbox" name="option" value="checkedVisibleNok" id="dock_books_visible_nok" /> </td> 
         <td><label for="dock_books_search_visible_online_no"> No</label></td> 

Answer 1

对于多个选项中的单个选项，我们使用Radio Buttons而不是CheckBoxes。

你应该使用这样的东西。

<input type="radio" name="option" value="Yes" id="yes" /> 
<input type="radio" name="option" value="No" id="no" /> 

但是，如果你想圆走另一条路，只需添加下面的脚本在你的脑袋标签仍然：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 
    $(':checkbox').bind('change', function() { 
     var thisClass = $(this).attr('class'); 
     if ($(this).attr('checked')) { 
      $(':checkbox.' + thisClass + ":not(#" + this.id + ")").removeAttr('checked'); 
     } 
     else { 
      $(this).attr('checked', 'checked'); 
     } 
    }); 
}); 
</script> 

这里是fiddle以上。

希望这会有所帮助。

Answer 2

这看起来像单选按钮，复选框不工作的部分的画面。

Answer 3

嗨你为什么使用复选框？复选框不适用于您想要的功能。单选按钮确切地是你想要使用的。

<form> 
<input type="radio" name="sex" value="male" /> Male<br /> 
<input type="radio" name="sex" value="female" /> Female 
</form> 

进一步的细节看here

Answer 4

尝试使用单选按钮的，给他们相同的名称将它们分组，并只允许1供选择：

<td> 
    <label for="dock_books_search_visible_online"> Visible online?</label> 
</td> 
<td> 
    <input type="radio" name="option" value="checkedVisibleOk" id="dock_books_visible_ok" /> 
</td> 
<td> 
    <label for="dock_books_search_visible_online_yes"> Yes</label> 
</td> 
<td><input type="radio" name="option" value="checkedVisibleNok" id="dock_books_visible_nok" /> 
</td> 
<td> 
    <label for="dock_books_search_visible_online_no"> No</label> 
</td> 

Check this JSFiddle.

Answer 5

你有一点使用单选按钮这里的任何方式是javascript解决方案 我用它在我的项目中，当有搜索标志RIA和搜索结果中的数据网格由具有13个记录 阿贾克斯当我检查一个记录它会禁用其余

code for javascript enable disable check boxes jsfiddle

<form name="mainForm" method="GET"> 

    Visible online? 


     <input type="checkbox" name="option" value="checkedVisibleOk" id="option" onclick="changeCheckBox();"/> 

yes 

     <input type="checkbox" name="option" value="checkedVisibleNok"  id="option" onclick="changeCheckBox();"/> 

     no 

</form> 
<script> 
var serNoChecked=""; 
function changeCheckBox() { 
try { 

     var max = document.mainForm.option.length; 
     var count = 0; 

     for (var i = 0; i < max; i++) { 
      if (document.mainForm.option[i].checked == true) { 
       count++; 
       serNoChecked = i; 
      } 
     } 
     if (count == 1) { 
      for (var i = 0; i < max; i++) { 
       if (document.mainForm.option[i].checked == false) { 
        document.mainForm.option[i].disabled = true; 
       } 
      } 
     } 
     else if (count == 0) { 
      for (var i = 0; i < max; i++) { 
       document.mainForm.option[i].disabled = false; 
      } 
     } 

     if (null == max) return false; 
     if (count == 0) { 
      return true; 
     } 
     else if (count > 0) { 
      return false; 
     } 

    } 
    catch (e) { 
     alert(e.message); 
    } 
} 
    </script> 

Answer 6

function toggle(chkBox, field) { 
    for (var i = 0; i < field.length; i++) { 
     field[i].checked = false; 
    } 
    chkBox.checked = true; 
} 


<td> 
    <INPUT type="checkbox" name="xyz" onClick="toggle(this,document.myform.xyz);" value="${incident.incidentID}"> 
</td> 

Answer 7

使用单选按钮，并确保该名称标签与所有一致选项，它会自动选择一个不需要附加代码或JS的选项。