2017-06-06 3 views
2

これは偶然に偶然見つけたもので、バグか意図した動作かどうかは疑問です。私は入力タイプ= "hidden"をチェックしましたが、これは不可能だと思いました。しかし、使用されているjQueryセレクターによっては、このフィールドが返されるか、返されません。入力タイプ= "hidden"とprop( "checked"、true)の不思議な振る舞い

HTML:

<form> 
    <div>Checkbox: <input class="test" type="checkbox" name="check" value="1" /></div> 
    <div>Hidden: <input class="test" type="hidden" name="check" value="1" /></div> 
    <div><input id="button" type="button" value="run test" /></div> 
    <div>Results:</div> 
    <div id="resultA"><strong>$('.test:checked')</strong><br /></div> 
    <div id="resultB"><strong>$('.test:checked[value=1]')</strong><br /></div> 
    <div id="resultC"><strong>$('.test:checked[value="1"]')</strong><br /></div> 
</form> 

のjQuery:JSFiddleとして上記の例

$(function() { 
    $('#button').click(function() { 
    $('.test').prop('checked', true); 

    $('.test:checked').each(function() { 
     $('#resultA').append($(this).attr('type') + ' - checked<br />'); 
    }); 

    $('.test:checked[value=1]').each(function() { 
     $('#resultB').append($(this).attr('type') + ' - checked<br />'); 
    }); 

    $('.test:checked[value="1"]').each(function() { 
     $('#resultC').append($(this).attr('type') + ' - checked<br />'); 
    }); 
    }); 
}); 

https://jsfiddle.net/m5fatj8q/6/

ResultA:チェックボックスを返すのみ。

ResultB:チェックボックスとヒッデンフィールドの両方を返します。

ResultC:チェックボックスのみを返します。


マイquestingがある:

なぜresultBは隠しフィールドを返すのですか?これはバグか意図された動作ですか?

答えて

1

属性セレクタ[value=1]は無効です。あなたは属性セレクタに反対一致している値は

は数字で始めることはできません(あなたの第三のオプションごとに、引用符で示す)文字列またはCSS identifierなければならないのいずれか。動作が異なる理由です

それは、その後1と2とで異なる理由Sizzleにダウンバグでなければならない2〜3、jQueryのは正しく無効処理していない、内部で使用セレクタエンジンセレクタ。代わりにquerySelectorAllを使用すると、

'.test:checked [value = 1]'が有効なセレクタではありません。


ノーでよシズルのソースコードの専門家を意味するが、私は問題はtheir definition of an attributeの組み合わせだと思う:

// "Attribute values must be CSS identifiers [capture 5] or strings [capture 3 or capture 4]" 

here

// Move the given value to match[3] whether quoted or unquoted 
match[3] = (match[3] || match[4] || match[5] || "").replace(runescape, funescape); 

は引用されているかどうかに関係なく、指定された値だけを使用しているように見えます。これは、その後the check for :checkedで配合されています

return (nodeName === "input" && !!elem.checked) || (nodeName === "option" && !!elem.selected); 
だけでは <input>要素だことを確認するために見ているようだ

、およびnot specificallyチェックボックスやラジオボタンを。

関連する問題