お互いに影響するチェックボックスのグループを設定するには

Question

曖昧なタイトルは申し訳ありませんが、私が何をしようとしているかをいくつかの言葉に凝縮するのはかなり難しいです。ここに私がやろうとしていることがあります：

私は一連のチェックボックスを使いたいと思います。 1つはジェンダー、男性と女性のチェックボックスは1つ、地域は北、東、南、西などのチェックボックス付きです。

目的は、ユーザーが男性または女性と言うことを選択できるようにすることですが、他のグループのチェックボックスにチェックを入れるとすぐにそのことを示します。 「Region」チェックボックスのいずれかで、他のすべてのグループの以前の「チェック」がすべて削除されます。

ポイントは、一度に1つのグループのチェックボックスから選択することだけです。

javascriptを使用してクリックするとどのチェックボックスがマークされているかを確認することしか考えられませんが、欠けている可能性がある簡単な方法があるかどうか疑問に思っていました。

私はまた、各グループの隠れたラジオボタンが機能する可能性があると考えました。

誰かがより洗練されたソリューションを持っていれば、私はそれを聞いて欲しいです。

Answer 1

fearofawhack惑星から少し助けを借りてそれを把握することができました。今はとてもシンプルに見えます。でもラジオボタンを使用して、あなたはまだそうええ、提出前にJSでそれらを設定する必要があると思います - - のビットJSFiddle http://jsfiddle.net/aeeN4/

Answer 2

私は純粋なJavascriptを行って以来ずっとずっと続いています.jQueryのようなライブラリは、このようなことをとても簡単にします。とにかく、以下のようなものが動作するかもしれません。いくつかのブラウザでテストし、必要なものを調整する必要があります。

<form name="theForm"> 
    <input type="checkbox" id="male" name="theGroup" onClick="clearGroup(this);">male 
    <input type="checkbox" id="female" name="theGroup" onClick="clearGroup(this);">female 
    <br /> 
    <input type="checkbox" id="north" name="theGroup" onClick="clearGroup(this);">north 
    <input type="checkbox" id="south" name="theGroup" onClick="clearGroup(this);">south 
    <input type="checkbox" id="east" name="theGroup" onClick="clearGroup(this);">east 
    <input type="checkbox" id="west" name="theGroup" onClick="clearGroup(this);">west 
</form> 

<script> 
    function clearGroup(elem) { 
     var group = document.theForm.theGroup; 
     for (var i=0; i<group.length; i++) { 
      if (group[i] != elem) { 
       group[i].checked = false; 
      } 
     } 
    } 
</script> 

ここにはa working exampleがあります。

は、あなたは、単にとして

$('input:checkbox').click(function() { 
    $(this).siblings(':checked').attr('checked', false); 
}); 

ようにjQueryで同等のことを行うことができ、あなたは心配するブラウザの互換性の問題を持っていません。