7

トグルを3回押した後にコードフラグメントが機能しない理由を誰か説明できますか?

チェックされた属性はまだ「チェック済み」に設定されていますが、ブラウザはチェックボックスをチェックしなくなりました。

$(document).ready(function() {

  $("#btn").click(function() {

    if($("#chk").is(":checked"))  
       $("#chk").removeAttr("checked");  
    else
       $("#chk").attr("checked","checked");

    $("#lbldebug").text($("#chk").clone().wrap('<p>').parent().html());
  });
});

http://jsbin.com/ewawih/2/editを参照

Opera と Chrome の両方でテストしましたが、両方で同じ問題が発生しました。

ここで何が欠けていますか？

4

4 に答える 4

7

jQuery 1.9+ の場合、プロパティの attr は機能しません。次のようにチェックボックスの切り替えを簡素化できます。

  $("#btn").click(function() {
      $("#chk").prop("checked",!$("#chk").prop("checked"));
      $("#lbldebug").text($("#chk").clone().wrap('<p>').parent().html());
  });

編集: 参照:!$("#chk").prop("checked")ブール値を現在の値の反対にする最初の文字に注意してください。したがって、その値が何であれ、現在の値の反対に設定することでトグルが機能します。

説明のためにattr('checked')、jQuery 1.9+ で にアクセスすると、マークアップの一部である元の属性が取得されますが、.prop("checked")はその現在のプロパティ値にアクセスします。一部のものはまだ属性ですが、これはプロパティであり、属性を介した/属性としてのプロパティへのアクセスは廃止され、jQuery 1.9/2.0 で削除されました。jQuery 1.6 では変更が加えられ、1.6.1 ではそれらの変更の一部が元に戻され、attr()1.6.1 の変更によりまだ機能していたとしても廃止されました。1.9+ では、これらの使用法が削除されました。属性を何らかの文字列と考え、プロパティを現在の値と考えてください。属性の使用は、変更されなかった文字列にアクセスしていましたが、プロパティは変更されたため、.prop()機能します。

また、要素にテキスト/ラップを使用すると（デバッグ用と思われます）、プロパティは表示されず、プロパティを含まない要素の「文字列」のみが表示されることに注意してください-したがって、変更/存在しないように見えますこの方法で「デバッグ」すると、プロパティ (true/false 値) へのアクセスを追加し、それを追加して、その値の可視表現を取得する必要があります。

  • 属性値は、現在の表示状態と実際の値 (一部の古いバージョンの IE は異なります) ではなく、デフォルト (開始時のマークアップ/ページが最初にレンダリングされたときのもの) を反映します。したがって、属性は、チェックボックスがチェックされているかどうかについて何も伝えていないことがわかります。

クロムの 1.9.1 の場合:

$("#chk").checked //returns undefined

（変更前は機能していましたが、バグのように感じます）

EDIT2:wrong:不正なフォーム

$("#chk")[0].checked // proper form works
$("#chk").get(0).checked  // same as above, works
document.getElementById("chk").getAttribute("checked") // returns "checked" or null or "true" or "fun" or empty "" if it was set thay way, attribute present checks box
$("#chk").is(":checked") // returns true/false current value
$("#chk").attr("checked") // returns "checked" or undefined does not change
document.getElementById("chk").defaultChecked // returns true/false of original, does not change
$("#chk").prop("checked") // returns current value true/false
document.getElementById("chk").checked //returns current value true/false
$("#chk").is("[checked]") // attribute selector returns original value, does not change
于 2013-02-10T18:48:26.803 に答える
3 
if($("#chk").is(":checked"))  
    $("#chk").prop("checked", false);  
else
    $("#chk").prop("checked", true);

.prop()BOOLEAN で指定することもできます。

于 2013-02-10T18:30:57.573 に答える
0 
$(document).ready(function() {

  $("#btn").click(function() {

    if($("#chk").attr('checked')=='checked')  
       $("#chk").removeAttr("checked");  
    else
       $("#chk").attr("checked","checked");

    $("#lbldebug").text($("#chk").clone().wrap('<p>').parent().html());
  });
});

それがあなたのために働くことを願っています

于 2013-02-10T18:38:00.523 に答える