[jQuery]checkboxかradioかを調べる

Read More

jQueryを使ってcheckboxradioかを調べたい。





この場合type属性をみればcheckboxかradioかを簡単に判断することができる。



■checkboxとradio判定のサンプルコード
<html>
<head>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script>
$(function() {
  $('input').click(function() {
    alert($(this).attr('type'));
  });
});
</script>
</head>
<body>
<input type="checkbox" name="checkbox_1" value="1" />test1
<input type="radio" name="radio_1" value="1" />test2
</body>
</html>




■実行結果
checkbox、radioをそれぞれクリックしてみた結果。



きちんとcheckbox、radioとわかる値が取れている。
attr('type')がその部分。

あと別にここではprop('type')を使う必要はない。
キャッシュされている値を使い続けて問題ないので。




さてこれを応用するとinput要素のcheckbox、radioだけでなく、textselecttextareaなどの要素の判定も可能になる。


■要素(属性含む)の判定のサンプルコード
<html>
<head>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script>
$(function() {
  $('input, select, textarea').click(function() {
    $case = $(this)[0].tagName.toLowerCase();
    switch($case) {
      case 'input':
        alert($case + ':' + $(this).attr('type'));
        break;
      case 'select':
      case 'textarea':
        alert($case);
        break;
    }// end switch
  });
});
</script>
</head>
<body>
<input type="checkbox" name="checkbox_1" value="1" />test1<br />
<input type="radio" name="radio_1" value="1" />test2<br />
<input type="text" name="text_1" value="1" /><br />
<select name="select_1"><option value="1">1</option></select>
<textarea>1</textarea>
</body>
</html>




要素名はtagNameでとれる。
nodeNameっていうエイリアスもあるみたい。

toLowerCase()は大文字を小文字に変換するもの。
逆に小文字を大文字にするにはtoUpperCase()ってのがある。






--
たまーに要素とか属性で処理を分岐させたいときがあるんだよねえ。


あと何度も言うけどjavascriptに大きな仕事をさせるのは嫌いです。
ブラウザによる挙動の差異や、Verによる差異、クライアントPCにかかる負荷、好き勝手に挙動が変えれるのであとあとの管理がめんどい、etc...


PHPと違ってjavasは見た目上の動きがつけれるからついつい使っちゃいたくなるのもわかるんだけど。


javasを使わないと解決できない!
って時は使うのもやむなしだけど、それ以外ではなるべく多用したくないものです。