此HTML的CSS选择器和Jquery

Question

I have the next 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>

I would like to: - I Expect to get in an array all the inputs id (p143,p144) in an array using the name attribute (3 in this case).

• Then I would like to remove the LI elements that contains that inputs. I know that if I get the input elemens by a CSS Selector I would do it using $"CSSSELECTOR".parent().remove();

And in a final stage, how to do the change to that CSS Selector to get only the Checked=True using the name again (I want again the IDs).

For the second I´m trying something like:

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

Where index is the 0 or 3 in this case, but it doesn´t work.

I don´t need the full solution, and explanation would be better to start thinking in css selectors.

Thanks.

SOLVED.

The HTML was not right because I copy it bad, it is generate by other events.

I only mark as correct the first answer (Wirey) because the others use EACH method and I think that the performance of Wirey solution is the best, and this HTML is just a part of all the generate code in a few levels.

Answer 1

Once you fix your markup with the missing <li> and </ul> ..

First issue is your selector

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

It's not a checkbox element but an input element of type checkbox so what you need is

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

You state that you want an array with those elements ids. So you can use jQuery's .map() function to return that in a collection then .get() to get an array

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

If you wanted to get only checked items, you can use the :checked selector to get only checked inputs

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

Once you get your selector, you can just find your li just like in your example and remove

$(yourselector).parent('li').remove();
// or if it's nested deeper $(yourselector).closest('li').remove();

Answer 2

Really hard to understand what you want to do, but here is an example for removing a LI . First, your HTML is not proper, here it is fixed:

<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>

Will edit with JQuery example.

Answer 3

if their attribute is '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)

if their attribute is '0' and they are checked:

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)

Answer 4

Is this what you are looking for? This will iterate through all the checkboxes and store the details in an array.

Sample 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;
}