ただ1つのチェックボックスを選択してください

Question

私はjavascriptを作成したいので、ユーザーは以下の間で1つのオプションを選択できます。私は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

複数のオプションから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> 

、ラジオボタンのを使用してみてくださいグループにそれらにそれらを同じ名前を付け、1つだけを選択できるようにhere

Answer 4

を見て：

<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

あなたはここではラジオボタンを使用するポイントがあるjavacriptのソリューションです 私はそれが私のプロジェクトでは、検索のクライトが使用されて使用私は1つのレコードをチェックするとき、それは残り

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

使用のラジオボタンを無効にし、名前タグがすべてと一致していることを確認する13回の記録を持つ AJAXによるデータグリッドでRIA検索結果オプションを選択すると、追加のコードまたはJSの必要性なしで自動的に1つだけ選択されます。