2012-04-19 12 views
0

配列に格納されている値に従ってチェックボックスを設定するスクリプトを作成しています(ユーザーがフォームを元の値に戻すための大きなスクリプトの一部です)。コードは基本的に次のとおりです。jQuery:配列からチェックボックスの値を設定する

$("#myForm :checkbox[name='myName[]']").each(function(){ 
    if($.inArray($(this).val(),initValues)!=-1){ 
     $(this).prop("checked",true); 
    } else { 
     $(this).prop("checked",false); 
    } 
}); 

initValuesには、最初にチェックされたボックスの値属性が含まれています。

スクリプトは$("#myForm :checkbox[name='myName[]']")の最初の要素をチェックしますが、それ以降の要素はすべてチェックされていないように見えます。 Firebugは、checked属性が変更されているが、ボックス自体はチェックされていないことを示しています。

私はprop()の代わりに、同じ結果を持つすべてのattr()のverious順列を試してみましたが、スクリプトがOS X上のFirefox 11.0とChrome 18.0で同じよ​​うに動作し

+1

いくつかのHTMLを入力してください。 '.val()'が期待する値を返さない可能性があります。 – Blazemonger

+0

'.prop()'が正しいです。あなたのコードはうまく動作します[ここ](http://jsfiddle.net/mblase75/DmVYa/)。最近のバージョンのjQueryを使用していますか? – Blazemonger

+0

私はそれを考慮しましたが、私が知る限りでは、 '$ .inArray()'テストは必要なように動作しています。 HTMLは膨大なプロジェクトの一部ですのでここに表示するのは少し複雑ですが、テストケースを試してみましょう。ありがとうございます – toppy

答えて

0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      var initValues = ['eee', 'mec', 'csc']; 

      $('#btnResetCheckBox').click(function() { 
       $('#myForm').find(':checkbox[name^="myName"]').each(function() { 
        $(this).prop("checked", ($.inArray($(this).val(), initValues) != -1)); 
       }); 

       //Or 

       //    $('#myForm').find(':checkbox[name^="myName"]').prop('checked', false); 
       //    $.each(initValues, function (i, val) { 
       //     $('#myForm').find(':checkbox[name^="myName"][value="' + val + '"]').prop("checked", true); 
       //    }); 
      }); 

      $('#btnResetCheckBox').trigger('click'); 
     }); 
    </script> 
</head> 
<body> 
    <form id="myForm" action=""> 
    <div> 
     <input type="checkbox" name="myName[1]" value="eee" />eee<br /> 
     <input type="checkbox" name="myName[2]" value="ece" />ese<br /> 
     <input type="checkbox" name="myName[3]" value="it" />it<br /> 
     <input type="checkbox" name="myName[4]" value="csc" />csc<br /> 
     <input type="checkbox" name="myName[5]" value="mec" />mec<br /> 
    </div> 
    <input type="button" id="btnResetCheckBox" value="Reset Check Box" /> 
    </form> 
</body> 
</html> 
+1

このリンクを参照してください:http://jsfiddle.net/nanoquantumtech/dnhwz/ – Thulasiram

0

HTML属性をmessupすることができ文字列として設定されていない場合

私は交換することをお勧め:

$(this).prop("checked",true); 

$(this).prop("checked","checked"); 

または

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

によって

$(this).prop("checked","");