jqueryで[checked]と:checkedの違いについて_技術三昧ブログ

ホーム » ブログ » jqueryで[checked]と:checkedの違いについて

@2013/06/17

最近の作業で[checked]と:checkedの問題が起こりました。僕はいろいろテストしてみた、

<input type="checkbox" checked>

⇒$(input[checked])　結果：空文字列
⇒$(input:checked)　結果：true

結論は：

$(input[checked])を使ったら、画面初期化の時、htmlソースでcheckedを書かれてるオブジェクトだけが操作対象となります(checked=""でも含む)。
$(input:checked)の場合、ただ今チェックされているオブジェクトです（ただ今のhtmlソースには関係がない。実はboolean型のchecked属性は、初期表示の後、チェックしてもHTMLソース上で変わりません）。

簡単にサンプルを作成しました。実行してみたら、すくにわかるかも。

<!DOCTYPE html>
<html>
<head>
  <style>
  div { color:red; }
  </style>
  <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
</head>
<body>
 
<form>
  <p>
<label>
    <input type="radio" name="rdo_name" value="A" checked="checked"><span>ラジオA(初期値checked="checked")</span><br>
</label> 
<label>
    <input type="radio" name="rdo_name" value="B" checked=""><span>ラジオB(初期値checked="")</span><br>
</label>
<label>
    <input type="radio" name="rdo_name" value="C"><span>ラジオC</span><br>
</label>
<label> 
    <input type="radio" name="rdo_name" value="D" checked><span>ラジオD(初期値checked)</span><br>
</label>
<label>
    <input type="radio" name="rdo_name" value="E"><span>ラジオE</span><br>
</label>
  </p>
</form>
<div></div>
 
<script>
 
$( "input[type=radio]" ).bind( "click", function(){

var t1 = "[name=rdo_name]:checkedなら(input:checkedも同じ)、チェックされたradioの数="+ $( "[name=rdo_name]:checked" ).length + "　value=" + $( "[name=rdo_name]:checked" ).val() +"<br><br>";
var t2 = "[name=rdo_name][checked]なら(input[checked]も同じ)、チェックされたradioの数="+ $( "[name=rdo_name][checked]" ).length  + "　value=" + $( "[name=rdo_name][checked]" ).val() +"<br><br>";

var msg ="ただ今チェックされているラジオボタンは"+$( "[name=rdo_name]:checked" ).val();

$( "div" ).html("");

$( "div" ).html(t1+t2+msg);

} );

</script>

</body>
</html>

♪ 当記事がお役に立ちましたらシェアして頂ければ嬉しいです。

1人

★ 当記事を閲覧の方は下記の【関連記事】も閲覧していました。

閲覧履歴(直近10件)

◎zanmai.netサイト記事の転載・複製（コピー）は、zanmai.netへのリンクであることを明記してください！
◎本記事URL: https://www.zanmai.net/blog/data/127.html

閉じる

jqueryで[checked]と:checkedの違いについて_ブログ_zanmai.net

※会員の方は認証コードを要らないから、新規登録をオススメ！