jQueryのは、常に1つのチェックボックスには、次のHTMLチェックボックスのコードで

Question

を確認した私は、次のjQueryに

$(function() { 
    $('input[type="checkbox"]').bind('click',function() { 
     $('input[type="checkbox"]').not(this).prop("checked", false); 
    }); 
}); 

ので、チェックボックスのいずれかがチェックされていることで、すべてを行う必要がありますどのような変更

<input type="checkbox" class="example" checked />2016 
<input type="checkbox" class="example" />2015 
<input type="checkbox" class="example" />2014 
<input type="checkbox" class="example" />2013 
<input type="checkbox" class="example" />2012 
<input type="checkbox" class="example" />2011 
<input type="checkbox" class="example" />2010 

空白のチェックボックスを許可しない時間？

Answer 1

あなたは、チェックボックス付きの美しいUIコンポーネントを持っているようです。そのため、ラジオ入力を使用したくないのはなぜですか？

あなたの質問について：

$(function() { 
 
    $('input[type="checkbox"]').bind('click',function() { 
 
     $(this) 
 
      .parent() 
 
      .find('[type="checkbox"]').not(this) 
 
      .removeAttr('checked'); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<input type="checkbox" class="example" checked />2016 
 
<input type="checkbox" class="example" />2015 
 
<input type="checkbox" class="example" />2014 
 
<input type="checkbox" class="example" />2013 
 
<input type="checkbox" class="example" />2012 
 
<input type="checkbox" class="example" />2011 
 
<input type="checkbox" class="example" />2010

Answer 2

を必要に応じて、あなたのコードが動作するあなたの代わりにラジオボタンを使用したくなかったように思えます。 これはあなたの更新されたコードです。希望どおりに動作します。チェックしたボックスが再度クリックされてチェックが外されないようにする必要があります。

$(function() { 
 
    $('input[type="checkbox"]').bind('click',function() { 
 
     if($(this).prop('checked') === false) { 
 
      $(this).prop('checked', true); 
 
     } 
 
     $('input[type="checkbox"]').not(this).prop("checked", false); 
 
    }); 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 
<input type="checkbox" class="example" checked />2016 
 
<input type="checkbox" class="example" />2015 
 
<input type="checkbox" class="example" />2014 
 
<input type="checkbox" class="example" />2013 
 
<input type="checkbox" class="example" />2012 
 
<input type="checkbox" class="example" />2011 
 
<input type="checkbox" class="example" />2010

Answer 3

同じことを達成するための（短い）の方法は、さらに別の存在である。

$(function() { 
    $(':checkbox').click(function(){ 
     $(this).prop('checked', true).siblings(':checkbox').prop("checked", false); 
    }); 
}); 

それは単にいつもクリックされた要素がチェックされ、すべての兄弟がオフに維持されます。