タイプと名前(セレクター)によるターゲット入力


132

ページ上のすべての入力ではなく一部のチェックボックス入力を非表示の入力に変更する必要があります。

<input type="checkbox" name="ProductCode"value="396P4"> 
<input type="checkbox" name="ProductCode"value="401P4"> 
<input type="checkbox" name="ProductCode"value="F460129">

以下のjqueryコードは、すべてのチェックボックスを非表示の入力に変更するタイプによってのみ入力を選択しますinput = "checkbox"とname = "ProductCode"の両方のタイプをセレクターとしてチェックする方法があります。変えたいって?

$("input[type='checkbox']").each(function(){
var name = $(this).attr('name'); // grab name of original
var value = $(this).attr('value'); // grab value of original
var html = '<input type="hidden" name="'+name+'" value="'+value+'" />';
$(this).after(html).remove(); // add new, then remove original input
});

回答:


285

複数の属性セレクタが必要です

$("input[type='checkbox'][name='ProductCode']").each(function(){ ...

または

$("input:checkbox[name='ProductCode']").each(function(){ ...

CSSクラスを使用して、選択したいものを特定することをお勧めします。ただし、最新のブラウザーの多くは、document.getElementsByClassName要素の選択に使用されるメソッドを実装しており、name属性による選択よりもはるかに高速です。


どちらもうまくいきましたが、2つ目の方法を使用しました。THX、別の質問がありますが、新しい質問をします。
user357034 2010

22

この方法で属性セレクターを組み合わせることができます:

$("[attr1=val][attr2=val]")...

そのため、要素は両方の条件を満たす必要があります。もちろん、これは2つ以上使用できます。また、しないでください[type=checkbox]。jQueryにはそのためのセレクターがあります。つまり:checkbox、最終結果は次のようになります。

$("input:checkbox[name=ProductCode]")...

ただし、属性セレクターは低速であるため、可能な場合はIDセレクターとクラスセレクターを使用することをお勧めします。マークアップを次のように変更できます。

<input type="checkbox" class="ProductCode" name="ProductCode"value="396P4"> 
<input type="checkbox" class="ProductCode" name="ProductCode"value="401P4"> 
<input type="checkbox" class="ProductCode" name="ProductCode"value="F460129">

あなたが使用できるようにかなりの高速化セレクタを:

$("input.ProductCode")...

当然これも機能しますが、正解は1人にしか与えられません。:)クラスをターゲットにできないので、クラスを追加しない限りマークアップにアクセスできません。しかし、Thx !!!
user357034 2010

6
input[type='checkbox', name='ProductCode']

それがCSSの方法であり、jQueryで機能することはほぼ間違いないと思います。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.