jQueryはラジオボタン(radio)のチェックアウトとキャンセルを実現し、attr()の代わりにprop()を使用してピットブログを踏む

Altabaのブログへようこそ 2017年11月1日
多くの場合、jsスクリプトがラジオボタンの列を操作し、バックグラウンドデータを取得して現在の項目の設定値を表示し、ラジオボックスで表示する必要があります.さらに、チェックラジオボタンを修正することで、この項目の値を修正することもできます.プロジェクトのフロントエンド全体がjQueryで実現されているため、attr()メソッドを使用してラジオボタンchecked属性を修正することを思い切って考えています.想像もできない奇妙な問題に直面したことを誰が知っていますか?
例えば、ラジオボタンを手動で修正しても、jQueryのattr()でクリアできないし、クリアしてもスクリプトでラジオボタンを再チェックできないので、テストに午後時間がかかりました.baidu googleは午後からattr()で実現すると言っていたので、この方法を疑っていません.
後で資料を調べたところ,jqueryではattr()とprop()メソッドを同時に提供して属性を取得しているが,まだ一定の違いがあることが分かった.
原文は次のように書かれています.
The difference between attributes and properties can be important in specific situations. Before jQuery 1.6 , the .attr() method sometimes took property values into account when retrieving some attributes, which could cause inconsistent behavior. As of jQuery 1.6 , the .prop() method provides a way to explicitly retrieve property values, while .attr() retrieves attributes.For example, selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, and defaultSelected should be retrieved and set with the .prop() method. Prior to jQuery 1.6 , these properties were retrievable with the .attr() method, but this was not within the scope of attr. These do not have corresponding attributes and are only properties.
大体の意味は、jquery 1.6以降、checked、selectedなどに対して状態変更を行う場合、attr()ではなくprop()を使用し、ラジオボックスが選択されているかどうかを判断し、これも同様にprop()!!!
そこですべてのattr()をprop()に修正して完璧に実現し、やはりフレームワークの沈黙はプログラマーを狂わせることができる.
次はdemoコードです.テストのコピーを歓迎します.

    
    













       
       
       
       
       


    /*//              
    $(":radio").click(
        function(){
            var nm=$(this).attr("name");
            $(":radio[name="+nm+"]:not(:checked)").attr("tag",0);
            if($(this).attr("tag")==1){
                $(this).attr("checked",false);
                $(this).attr("tag",0);
            } else{
                $(this).attr("tag",1);
            }
        }
    );*/

    function de() {
        //    ，          
        /*$.each($('input:radio'),function(i,v){
            $(v).attr('checked', false);
            $(v).removeAttr('checked');
            //v.checked = false;
            //v.removeAttribute("checked");
        })*/

        //$("input[name=aaa]").prop("checked",false);
        $('input:checked').prop('checked', false);
        //$("input[name=aaa]").removeAttr("checked")
    }

    $('.btn1').click(function () {
       de()
    })

    $('.btn2').click(function () {
        //de();
        $('input:radio').eq(1).prop('checked', true);

    })

    $('.btn3').click(function () {
        //de();
        $('input:radio').eq(2).prop('checked', true);

    })
    $('.btn4').click(function () {
        //de();
        $('input:radio').eq(3).prop('checked', true);

    })
    $('.btn5').click(function () {
        //de();
        $('input:radio').eq(4).prop('checked', true);

    })