jQuery Mobileのラジオボタンを選択解除できるようにしたいんです

やり方によるが、「二度押し」で解除させることができなくてハマった。

「もうお馴染みのラジオボタン」は1度選択したら最後解除できない、というのは利用者としてもおおむね常識だと思う。むしろ選択解除できるようにしたいものはプルダウンリストを使う。

スマートフォンだと、プルダウンで表現するとせっかくのタッチデバイスなのにいちいちツータッチ必要で面倒臭い、ラジオボタンにしてワンタッチにしたいという欲求が……ないですかね。
ところがラジオボタンだと選択解除ができないという。

jQuery Mobileでラジオボタンを利用すると、こうラジオボタンというより押しボタン式選択装置のような見た目になりますよね。で利用者としては「これ二度押ししたら選択解除できるんじゃね」と思いそう……ではないですかね。いやそうしてあげたい。

取り得る道として

くらいが思いつきます。

排他チェックボックスは昔何かで作った気がしますが、選択解除できるラジオボタンより排他選択なチェックボックスの方がより異常だと思うので、これはやりたくない。
※追記：そんなことない気が後からしてきた

クリアボタンなんて置きたくない。画面狭いし。二度押し選択解除でいいでしょ（結論ありき）、と思ってやってみました。

でもこれがなかなかできませんでした。

クリアボタン式なら楽です。

$("#clear_button").on("click", function(){
  $("#radio input:radio:checked").prop("checked", false).checkboxradio("refresh");
});

これでイケます。色々調べてもだいたいこの書き方が載っています。

ところが二度押しで解除させようとするとダメ。どうもバブリングしたイベントのせいでうまく選択解除されてくれない様子だったけど、stopPropagetion()してもだめ。
なんでや。。

どうするのかというと、

    $radio.prop("checked", false).checkboxradio("refresh");
    event.preventDefault();
    event.stopPropagation();

preventDefault()もやる。片方ではダメ。両方書かないと、せっかく$radio.prop("checked", false)しても後からcheckedにされてしまう。

するってーと

ボタンを押すと選択したラジオのvalueをalertします。

参考