javascript - jquery .find() が機能しない

Question

このコードは、ボタンをクリックするとチェックボックスをクリアする必要があります。タグを削除すると機能しますが、すべての子孫を見つけることになっている<form></form> と思いましたか?.find()

<script type="text/javascript">
$(document).ready(function(){

      var clearCheckboxes = function() {    
        $('.outerbox').find('input').each(function() {
          $(this).attr('checked', false);
        });
      }

      $('input.myButton').click(clearCheckboxes);
});
</script>

<div class="outerbox">    
  <form>
    <input type="checkbox" checked="" /> checkbox1
    <input type="checkbox" checked="" /> checkbox2
  </form>    
</div>
<input class="myButton" value="clear checkboxes now" type="button"/>

Answer 1

このコードは私にとってはうまくいきます：http://jsfiddle.net/CgsEu/

とにかく最新のjQueryを使っているなら、に変え.attrてみてください.prop。また、.each必要ありません。 jQuery オブジェクト内のすべての要素を処理します.attr。.prop

var clearCheckboxes = function() {    
    $('.outerbox').find('input').prop('checked', false)
}

デモ: http://jsfiddle.net/CgsEu/1/

他の入力がある場合は、.findチェックボックスだけに制限してみてください。

var clearCheckboxes = function() {    
    $('.outerbox').find('input:checkbox').prop('checked', false)
}

デモ: http://jsfiddle.net/CgsEu/2/

Answer 2

each() を使用する必要はありません。既に要素のコレクションがあり、次のようにすべての要素に変更を適用できます。

var clearCheckboxes = function() {    
    $('input', '.outerbox').attr('checked', false);
}

$('input.myButton').click(clearCheckboxes);

フィドル

attr() よりも prop() を使用するための提案がたくさんありますが、それはおそらく適切なアドバイスです。

W3C フォーム仕様によると、checked 属性はブール属性です。つまり、属性が存在する場合 (たとえば、属性に値がない場合や空の文字列値がある場合でも) は、対応するプロパティが true であることを意味します。チェックボックスがチェックされているかどうかを判断するための推奨されるクロスブラウザー互換の方法は、次のいずれかを使用して、要素のプロパティの「真実の」値をチェックすることです。

if ( elem.checked )

if ( $(elem).prop("checked") )

if ( $(elem).is(":checked") )

下位互換性を維持するために、jQuery 1.6.1+ の .attr() メソッドはプロパティを取得して更新するため、ブール属性のコードを .prop() に変更する必要はありません。それにもかかわらず、チェックされた値を取得するための推奨される方法は prop() です。

Answer 3

$(document).ready(function(){
  var clearCheckboxes = function() {    
      $('.outerbox').find('input[type="checkbox"]').each(function(){
          $(this).prop('checked', false);
      });
  }

  $('input.myButton').click(clearCheckboxes);
});​

デモ。

アップデート：

$('.outerbox').find('input[type="checkbox"]').prop('checked', false);

また

$('.outerbox input:checkbox').prop('checked', false);

デモ。

Answer 4

var clearCheckboxes = function() {    
  $('input[type="checkbox"]', '.outerbox').prop('checked', false);
}

$('input.myButton').click(clearCheckboxes);

Answer 5

小道具を使用します。

$(this).prop('checked', false);

代わりにattr