Question

我有以下代码，工作正常...我想要工作。但是，如果我将复选框放在表格中，我会得到一个空数组。

以下是代码：

<table border="1">
    <div id="boxes">
        <tr><td><input type="checkbox"  name="fruit[]" id="id1"  class="box" value="Banana"> Banana </td></tr>
        <tr><td><input type="checkbox"  name="fruit[]" id="id2"  class="box" value="Cherry"> Cherry </td></tr>
        <tr><td><input type="checkbox"  name="fruit[]" id="id3"  class="box" value="Strawberry"> Strawberry </td></tr>
        <tr><td><input type="checkbox"  name="fruit[]" id="id4"  class="box" value="Orange"> Orange </td></tr>
        <tr><td><input type="checkbox"  name="fruit[]" id="id5"  class="box" value="Peach"> Peach </td></tr>
    </div>
</table>
<br /><br />
<div id="chekcAll">
    <input type="button" id="checkThem" value="Check All Checkboxes">
</div>
<br /><br />
<form id="myForm" action="2.php" method="post"> 
    <input type="hidden" id="actualvalue" name="actualvalue" />
    <input type="submit" id="groupdelete" value="clickme"  disabled="disabled"/>
</form>
<script src="jquery-1.7.1.js" type="text/javascript"></script>
<script>
    $(document).ready(function(){
        // this function enable or disable the button on click on the checkboxes
        $(".box").click(function(){
            if($('.box').is(':checked'))  {     
                $('#groupdelete').removeAttr("disabled")
            } else {
                $('#groupdelete').attr('disabled', 'disabled');
            }
        })

        // this is the function for checking/unchecking all checkboxes with the button   
        $('#checkThem').on('click', function(){
            var $boxes = $("input[type='checkbox']"),
            $unselected = $boxes.not(function(){ 
                return this.checked;
            });
        // if there are any unselected boxes, it selects all, else it deselects all
            $boxes.prop('checked', $unselected.length > 0);
        })

        // this function toggle the Check All Checkboxes button label
        $('#checkThem').click(function() {
            if ($(this).val() == "Check All Checkboxes") {
                $(this).val("Uncheck All Checkboxes");
                $('#groupdelete').removeAttr("disabled")
            } else {
                $(this).val("Check All Checkboxes");
                $('#groupdelete').attr('disabled', 'disabled');
            }
        });

        // this function send the array to the php page when submit button is clicked
        $("#myForm").submit(function(e) {    
            var names = [];
            $('#boxes').children('input[name="fruit\[\]"]:checked').each(function() {
                names.push($(this).attr("id")); //it better to pass value by using        $(this).val()
            });    
            $("#actualvalue").val(names.join(","));
            $(this).children('input[name="fruit\[\]"]').attr('disabled','disabled');
        });
    });
</script>

如果我在复选框周围删除表格，代码可以工作......这是一个数组发送到我的页面2.php。现在有了表，我得到一个空数组。任何人都可以阐明这个谜团吗？

此致

Answer 1

children（）返回子节点，但是这些框不是表或#box的子节点，它们是td元素的子节点。

关于gdoron的回答：

使用正确的标记：

<table border="1" id="boxes">
<tr><td><input type="checkbox"  name="fruit[]" id="id1"  class="box" value="Banana"> Banana </td></tr>
 <tr><td><input type="checkbox"  name="fruit[]" id="id2"  class="box" value="Cherry"> Cherry </td></tr>
 <tr><td><input type="checkbox"  name="fruit[]" id="id3"  class="box" value="Strawberry"> Strawberry </td></tr>
 <tr><td><input type="checkbox"  name="fruit[]" id="id4"  class="box" value="Orange"> Orange </td></tr>
 <tr><td><input type="checkbox"  name="fruit[]" id="id5"  class="box" value="Peach"> Peach </td></tr>
</table>

...并使用简单的选择器来获取框，例如

$('input[name="fruit\[\]"]:checked',
  $('#boxes')).each(/*...*/)

（注意上下文的第二个参数，这将强制jQuery只查找#boxes中的元素）

Answer 2

您在table元素中嵌套了div元素。允许嵌套在表中的唯一元素是thead，tbody，tfoot，tr，th和td。任何其他元素只能放在th和td内。

以下更正应该为您设置：

<div id="boxes">
    <table border="1">
        <tr>
            <td><input type="checkbox" name="fruit[]" id="id1" class="box" value="Banana"> Banana</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="fruit[]" id="id2" class="box" value="Cherry"> Cherry</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="fruit[]" id="id3" class="box" value="Strawberry"> Strawberry</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="fruit[]" id="id4" class="box" value="Orange"> Orange</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="fruit[]" id="id5" class="box" value="Peach"> Peach</td>
        </tr>
    </table>
</div>

Answer 3

您正在使用.children（）但div＃boxes没有输入类型的子项。请改用.find（）

$('#boxes').find('input...').each...

Answer 4

您是否尝试将表格放入div中，而不是相反？不应该影响脚本，但div不是表的有效子项。

Answer 5

尝试更改此行

  $('#boxes').children('input[name="fruit\[\]"]:checked').each(function() {

到这个

  $('#boxes').find('input[name="fruit\[\]"]:checked').each(function() {

children只能进行一个级别，find一直向下

来自jquery网站的

：“给定一个表示一组DOM元素的jQuery对象，.children（）方法允许我们在DOM树中搜索这些元素的子元素，并从匹配元素构造一个新的jQuery对象.children（）方法与.find（）的不同之处在于.children（）只沿DOM树向下移动一个级别，而.find（）可以遍历多个级别以选择后代元素（孙子等）。。“

更多信息：http://api.jquery.com/children/

jquery代码中断，如果我添加一个表....任何人都可以找出原因？

5 个答案: