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

对于第二个我正在尝试类似的东西：

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

在这种情况下，index 是 0 或 3，但它不起作用。

我不需要完整的解决方案，最好开始考虑 css 选择器。

谢谢。

解决了。

HTML 不正确，因为我复制它不好，它是由其他事件生成的。

我只将第一个答案（Wirey）标记为正确，因为其他人使用 EACH 方法，我认为 Wiry 解决方案的性能是最好的，而这个 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

真的很难理解你想要做什么，但这里有一个删除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

如果他们的属性是'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

这是你想要的？这将遍历所有复选框并将详细信息存储在数组中。

示例 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 回答