web-dev-qa-db-ja.com

jQuery：チェックボックスをラジオボタンのように機能させるには？

チェックボックスをラジオボタンのように機能させる方法はありますか？これはjQueryで実行できると思いますか？

<input type="checkbox" class="radio" value="1" name="fooby[1][]" />
<input type="checkbox" class="radio" value="1" name="fooby[1][]" />
<input type="checkbox" class="radio" value="1" name="fooby[1][]" />

<input type="checkbox" class="radio" value="1" name="fooby[2][]" />
<input type="checkbox" class="radio" value="1" name="fooby[2][]" />
<input type="checkbox" class="radio" value="1" name="fooby[2][]" />

1つのボックスがチェックされている場合、グループ内の他のボックスはチェック解除されます。

jquerycheckboxradio-button
16
superUntitled
$("input:checkbox").click(function(){
    var group = "input:checkbox[name='"+$(this).attr("name")+"']";
    $(group).attr("checked",false);
    $(this).attr("checked",true);
});

これはうまくいくでしょうが、これは悪い考えかもしれません。

オンラインの例： http://jsfiddle.net/m5EuS/1/

[〜＃〜] update [〜＃〜]グループの分離を追加しました。

41
amosrivera

_Jquery 1.9_用に更新-.prop()の代わりに.attr()を使用

_$("input:checkbox").click(function(){
    var group = "input:checkbox[name='"+$(this).prop("name")+"']";
    $(group).prop("checked",false);
    $(this).prop("checked",true);
});
_

次に例を示します。 http://jsfiddle.net/m5EuS/585/

9
user2301396

スクリプトを更新して（Tomislavからの回答を介して）、すべてのチェックボックスをオフにすることもできるようにしました。 .not（this）を追加し、現在のチェックボックスがオンになっている行を削除しました。

$('form').each(function() { // iterate forms
  var $this = $(this);
  $this.find('input:checkbox').click(function() {
    var group = 'input:checkbox[name="' + $(this).attr('name') + '"]';
    $this.find(group).not(this).attr('checked', false).prop('checked', false); // also use prop, for real Property change
  });
});

http://jsfiddle.net/kya0639w/

3
Json

基本的に@amosriveraと同じ答えですが、必要に応じてすべてのチェックボックスのチェックを外します。代わりに.not（）を使用してください

    $("input:checkbox").click(function(){
        var group = "input:checkbox[name='"+$(this).prop("name")+"']";
        $(group).not(this).prop("checked",false);
    });
3
Rob

チェックボックスにクラスを適用すると、次のコードを使用してラジオボタンの機能を簡単に実現できます。

$(".make_radio").click(function(){
    $(".make_radio").not(this).attr("checked",false); 
});
3
Waqas Ahmed

おそらく、別のアプローチを検討する必要があります。ラジオボタンをチェックボックスのようにスタイル設定したいと思います。その場合は、次を参照してください this google search

以下は、www.thecssninja.comから借りた簡単な例です。

簡単に言うと、実際のラジオボタンを非表示にし（css input [type = radio]を参照）、対応するラジオボタンのラベルのスタイルを設定して、カスタムチェックボックスを表示します（input [typeの背景画像のcssスプライトから） = radio] + label）を選択し、ラジオボタンがチェック状態のときに、バックグラウンドで別のスプライトに切り替えます。ここで実行例： http://jsfiddle.net/jchandra/R5LEe/

    <!DOCTYPE html> 
    <html> 
    <head> 
      <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
      <title> Custom CSS3 control facade</title>       
      <style type='text/css'> 
        label {
          padding: 0 0 0 24px;
        }

        input[type=radio] { 
          padding:0;
          margin:0;
          width:16px;
          height:16px; 
          position:absolute;
          left:0;
          opacity:0
        }

        input[type=radio] + label {
          background:url(http://www.thecssninja.com/demo/css_custom-forms/gr_custom-inputs.png) 0 -1px no-repeat; 
          width:50px;
          height:16px;
        }

        input[type=radio]:checked + label {
          background-position:0 -81px;
        }
      </style>       
    </head> 
    <body> 
      Custom control images and concept from www.thecssninja.com<br/> 
      <br/> 
      <input type="radio" class="radio" value="1" name="fooby[1][]" id="r1" /><label for="r1"></label> 
      <input type="radio" class="radio" value="2" name="fooby[1][]" id="r2" /><label for="r2"></label> 
      <input type="radio" class="radio" value="3" name="fooby[1][]" id="r3" /><label for="r3"></label> 
      <br/> 
      <input type="radio" class="radio" value="1" name="fooby[2][]" id="r4" /><label for="r4"></label> 
      <input type="radio" class="radio" value="2" name="fooby[2][]" id="r5" /><label for="r5"></label> 
      <input type="radio" class="radio" value="3" name="fooby[2][]" id="r6" /><label for="r6"></label> 
  </body> 
</html>
3
Jimmy Chandra

コメントしますが、担当者がいません。アクセシビリティのために.clickではなく.changeを使用して、キーボードで動作するようにします。

  jQuery(".radio-check-box").change( function() {
    var checked = jQuery(this).prop("checked");
    jQuery(".radio-check-box").attr("checked", false);
    jQuery(this).prop("checked", checked);
  } );
0
Davorama

指定されたソリューションは、ラジオボタンの動作とは異なり、初期状態を考慮していません。さらに、すでにチェックされている入力をクリックすると、変更イベントもトリガーされます。

var $elements = $('input:checkbox');

// Allow only one input to be selected
$elements.filter(':checked:not(:last)').prop('checked', false);

// Get selected input
var selected = $elements.filter(':checked')[0] || {};

// Handle event
$(document).on('click', 'input:checkbox', function(e) {
  if (e.currentTarget === selected) {
    e.preventDefault(); 
  } else {
    selected.checked = false;
    selected = e.currentTarget;
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label><input type="checkbox" value="0" /> test 0</label>
<label><input type="checkbox" value="1" checked /> test 1</label>
<label><input type="checkbox" value="2" checked /> test 2</label>
<label><input type="checkbox" value="3" /> test 3</label>

それを行うのは悪い考えだということにも同意しますが、入力ごとに異なる名前を持っている（そしてそれらを変更できない）場合、他の選択肢はありません...

0
gtournie

Fiddleスクリプト、jQueryがありませんでした。propとattrを使用しました（両方を使用）。

$('form').each(function() { // iterate forms
  var $this = $(this);
  $this.find('input:checkbox').click(function() {
    var group = 'input:checkbox[name="' + $(this).attr('name') + '"]';
    $this.find(group).attr('checked', false).prop('checked', false); // also use prop, for real Property change
    $(this).attr('checked', true).prop('checked', true); // also use prop, for real Property change
  });
});

フィドル

0
Tomislav Kramaric

「$（ "input：checkbox"）」を選択すると、すべてのチェックボックスが選択されるため、名前を使用して別のラジオボタンを指定できます。

    $("[name='sname1']").click(function(){
     var group = "input:checkbox[name='"+$(this).attr("name")+"']";
     $(group).prop("checked",false);

以下の例で説明します

        $("[name='sname1']").click(function(){
    var group = "input:checkbox[name='"+$(this).attr("name")+"']";
    $(group).prop("checked",false);
    $(this).prop("checked",true);
        
        
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div style="border:1px solid">
<label><input type="checkbox" id="Titleblink_check" name="sname1">Blink</label>
&nbsp;&nbsp;(OR)&nbsp;&nbsp;
<label><input type="checkbox" id="Titleshine_check" name="sname1">Shine Text</label>
<br>
</div>



<label><input type="checkbox" id="id1" >Diff Check box1</label>
<br>
<label><input type="checkbox" id="id2">Diff Check box2</label>
<br>
<label><input type="checkbox" id="id3">Diff Check box3</label>
<br>

$（this）.prop（ "checked"、true）; }）;

0
Merbin Joe

チェックボックスの変更イベントを使用して、現在選択されているチェックボックスにチェック値を割り当てます。

        $("input[type=checkbox]").change(function()
        {
                $("input[type=checkbox]").prop('checked',false);
                $(this).prop('checked',true);
        });
.checkBoxb{
  float:left;
  clear:both;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="checkBoxb"><input type="checkbox"  /> CheckBox1</label>
<label class="checkBoxb"><input type="checkbox"  /> CheckBox2</label>
<label class="checkBoxb"><input type="checkbox"  /> CheckBox3</label>
<label class="checkBoxb"><input type="checkbox"  /> CheckBox4</label>
0
Sandip - Full Stack Developer