0

次の HTML があります。

 <div class="grid_4 col" id="countries">
            <div class="header">COUNTRIES</div>
            <div class="scroll-area">
                <ul id="countrySelector">

                <li><input type="checkbox" value="3" name="0" id="p0"> Algeria</li>
                <li><input type="checkbox" value="3" name="0" checked="true" id="p1"> Angola</li>
                <li><input type="checkbox" value="3" name="0" checked="true" id="p2"> Benin</li>
                <li><input type="checkbox" value="3" name="0" checked="true" id="p3"> Botswana</li>
                <li><input type="checkbox" value="3" name="0" checked="true" id="p4"> Burkina Faso</li>
                <li><input type="checkbox" value="3" name="0" id="p5"> Burundi</li>
                <li><input type="checkbox" value="3" name="0" id="p6"> Cameroon</li>
                <li><input type="checkbox" value="3" name="0" id="p7"> Cape Verde</li>
                <li><input type="checkbox" value="3" name="0" id="p8"> Central African Republic</li>
                <input type="checkbox" value="2" name="3" id="p142"> Tuvalu</li>
                <li><input type="checkbox" value="2" name="3" id="p143"> Vanuatu</li>
                <li><input type="checkbox" value="2" name="3" id="p144"> Wallis and Futuna</li>
            </div>                
        </div>

私はしたい: - name 属性 (この場合は 3) を使用して、配列内のすべての入力 ID (p143、p144) を配列に取得することを期待しています。

  • 次に、その入力を含む LI 要素を削除したいと思います。CSS セレクターで入力要素を取得する場合、 $"CSSSELECTOR".parent().remove(); を使用してそれを行うことを知っています。

そして最終段階で、その CSS セレクターを変更して、再度名前を使用して Checked=True のみを取得する方法 (もう一度 ID が必要です)。

2番目に、私は次のようなことを試みています:

jQuery("ul#countrySelector > li > checkbox[name=\"" + index + "\"]").parent("li").remove();

この場合、index は 0 または 3 ですが、機能しません。

完全な解決策は必要ありません。説明は、css セレクターで考え始める方がよいでしょう。

ありがとう。

解決しました。

HTML は間違ってコピーしたため正しくありませんでした。他のイベントによって生成されたものです。

最初の回答 (Wirey) のみを正しいものとしてマークします。他の回答は EACH メソッドを使用しており、Wirey ソリューションのパフォーマンスが最高であり、この HTML はいくつかのレベルのすべての生成コードの一部に過ぎないと思います。

4

4 に答える 4

1

不足しているマークアップを修正したら<li>、</ul>..

最初の問題はセレクターです

jQuery("ul#countrySelector > li > checkbox[name=\"" + index + "\"]")
// it says starting from ul with id=countrySelector > find children element li > find children element checkbox

これはチェックボックス要素ではなく、チェックボックスタイプの入力要素なので、必要なのは

jQuery("ul#countrySelector > li > input[type=checkbox][name=\"" + index + "\"]")
// or just jQuery("ul#countrySelector > li > input[name=\"" + index + "\"]") if these are the only elements with that name

これらの要素IDを持つ配列が必要であると述べています。したがって、jQueryの.map（）関数を使用してコレクションに返し、次に.get（）を使用して配列を取得できます。

var ids = jQuery("ul#countrySelector > li > input[type=checkbox][name=\"" + index + "\"]").map(function(){
    return this.id;
}).get(); // <-- use get() to get id's back as an array - now ids contains all the id's in an array

チェックされたアイテムのみを取得したい場合は、：checkedセレクターを使用して、チェックされた入力のみを取得できます。

jQuery("ul#countrySelector > li > input[type=checkbox][name=\"" + index + "\"]:checked")

liセレクターを取得したら、例のように自分のセレクターを見つけて削除できます

$(yourselector).parent('li').remove();
// or if it's nested deeper $(yourselector).closest('li').remove();
于 2012-12-07T19:44:05.460 に答える
0

属性が「0」の場合：

var countryArray = new Array();
$('#countries input[type=checkbox]').each(function(){
    if ($(this).attr('name') == '0') {
        countryArray.push($(this).attr('id'));
        $(this).parent('li').remove();
    }
})
console.log(countryArray)

それらの属性が「0」であり、それらがチェックされている場合：

var countryArray = new Array();
$('#countries input[type=checkbox]:checked').each(function(){
    if ($(this).attr('name') == '0') {
        countryArray.push($(this).attr('id'));
        $(this).parent('li').remove();
    }
})
console.log(countryArray)
于 2012-12-07T19:44:49.427 に答える
0

あなたが何をしたいのか理解するのは本当に難しいですが、これは を削除する例ですLI. まず、HTMLが適切ではありません。ここで修正されます。

<div class="grid_4 col" id="countries">
    <div class="header">COUNTRIES</div>
    <div class="scroll-area">
        <ul id="countrySelector">
            <li><input type="checkbox" value="3" name="0" id="p0"> Algeria</li>
            <li><input type="checkbox" value="3" name="0" checked="true" id="p1"> Angola</li>
            <li><input type="checkbox" value="3" name="0" checked="true" id="p2"> Benin</li>
            <li><input type="checkbox" value="3" name="0" checked="true" id="p3"> Botswana</li>
<li><input type="checkbox" value="3" name="0" checked="true" id="p4"> Burkina Faso</li>
            <li><input type="checkbox" value="3" name="0" id="p5"> Burundi</li>
            <li><input type="checkbox" value="3" name="0" id="p6"> Cameroon</li>
            <li><input type="checkbox" value="3" name="0" id="p7"> Cape Verde</li>
            <li><input type="checkbox" value="3" name="0" id="p8"> Central African Republic</li>
        <li><input type="checkbox" value="2" name="3" id="p142"> Tuvalu</li>
            <li><input type="checkbox" value="2" name="3" id="p143"> Vanuatu</li>
            <li><input type="checkbox" value="2" name="3" id="p144"> Wallis and Futuna</li>
        </ul>
    </div>                
</div>

JQueryの例で編集します。

于 2012-12-07T19:43:02.797 に答える
0

これはあなたが探しているものですか？これにより、すべてのチェックボックスが繰り返され、詳細が配列に格納されます。

サンプル JSFiddle : http://jsfiddle.net/Y84vr/32/

$(document).ready(function(){
    var myArray = createArray(20,3);
    var i=0;
    $('input[type="checkbox"]').each(function(){
        var isChecked = false;
        if ($(this).is('[checked]')) {
            isChecked = true;
        }    
        myArray[i][0] = $(this).attr('id');
        myArray[i][1] = $(this).attr('name');
        myArray[i][2] = isChecked;
        i++;
    });
    for(var c=0;c<15;c++){
       $('#output').append(myArray[c][0] + "  -  " + myArray[c][1] + "  -  " + myArray[c][2] + "<br/>");
    }
});

function createArray(dimX,dimY){
    var arr = [];
    for(var x = 0; x < dimX; x++){
       arr[x] = [];    
       for(var y = 0; y < dimY; y++){
          arr[x][y] = '';    
       }    
    }  
    return arr;
}
于 2012-12-07T19:58:17.087 に答える