jqeury でチェック状態を得るにあたって、「両方チェック」「チェック無し」を例外的に処理したいです

Question

下記のHTMLのようなチェックボックスがあるとき、

red (redだけにチェック)
green (greenだけにチェック)
both (redとgreenにチェック)
desable (チェックなし)

というどれかの値を得たいのですが、どうしたらいいでしょうか。

<ul>
  <li>
    <label>
      <input type="checkbox" value="red" name="allow">
      <span class="check"></span>
      <span class="txt">redを許可</span>
    </label>
  </li>
  <li>
    <label>
      <input type="checkbox" value="green" name="allow">
      <span class="check"></span>
      <span class="txt">greenを許可</span>
    </label>
  </li>
</ul>

ループと思ったのですが、下記では一つずつしか得られず、上記のような分岐をどうしたらいいのか行き詰っているところです。

var result;
$('input[name="allow"]:checked').each(function() {
  result = $(this).attr('value'); // -> red|green しか得られない
});
console.log(result); // -> red|green|both|desable のいずれかを得たい

Comments

[kei344]

「desable」は「disable」ですか？

[AkeOme]

でした;;

Answer 1

こんな感じでやってみてください

Comments

[yambejp]

$(function(){
$('[name=allow]').on('change',function(){
var result=null;
if($('[name=allow]:not(:checked)').length==0){
result="both";
}else if($('[name=allow]:checked').length==0){
result="desable";
}else{
result=$('[name=allow]:checked').val();
}
console.log(result);
});
});

[AkeOme]

CSSのように指定できるんですね。ありがとうございました。