0

セクションとサブセクションを含むテーブルを含む1つのフォームを開発する必要があります。セクションのクリックイベントで、サブセクションを選択/選択解除する必要があります。また、各サブセクションのチェックを外すと、セクションのチェックを外す必要があります。これを行う必要があります。行クリックとチェックボックスクリックのこと。http://imgboot.com/images/sureshdasari/selectdeselectcheckboxes.gifこれは私が欲しいものですが、この画像内でのみチェックボックスをクリックして機能し、行クリックでも同じアクションが必要です。誰かアイデアがありましたら、助けてください。 jqueryを使用する方が簡単で、私にも役立ちます。

前もって感謝します。

これが私のコードリンクですhttp://pastebin.com/J5bnXbN2行クリックで同じことをしたい

4

2 に答える 2

2

この例を試してください

http://jsfiddle.net/QUwuR/

<table>
<tr>
    <td><input type="checkbox" name="chk[]"/></td>
    <td>ID</td>
    <td>Name</td>
    <td>asd</td>
    <td>asd</td>
</tr>
<tr>
    <td><input type="checkbox" name="chk[]"/></td>
    <td>ID</td>
    <td>Name</td>
    <td>asd</td>
    <td>asd</td>
</tr>
<tr>
    <td><input type="checkbox" name="chk[]"/></td>
    <td>ID</td>
    <td>Name</td>
    <td>asd</td>
    <td>asd</td>
</tr>


$('tr').click(function() {
    var checkbox = $(this).find('td:first').find('input');
    if(checkbox.is(':checked')) {
        checkbox.attr('checked', false);
    }else {
        checkbox.attr('checked', true);
    }
});

編集:これは、提供したコードを使用した完全な作業例です

<html>
    <head>
    <title>How to highlight the selected row in table/gridview using jquery</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script language="javascript" type="text/javascript">
        $(document).ready(function()
        {
            $("#checkall").live('click',function(event){
            $('input:checkbox:not(#checkall)').attr('checked',this.checked);
            //To Highlight
            if ($(this).attr("checked") == true)
            {
            //$(this).parents('table:eq(0)').find('tr:not(#chkrow)').css("background-color","#FF3700");
            $("#tblDisplay").find('tr:not(#chkrow)').css("background-color","#FC9A01");
            }
            else
            {
            //$(this).parents('table:eq(0)').find('tr:not(#chkrow)').css("background-color","#fff");
            $("#tblDisplay").find('tr:not(#chkrow)').css("background-color","#FFF");
        }
    });
        $('input:checkbox:not(#checkall)').live('click',function(event)
        {
            if($("#checkall").attr('checked') == true && this.checked == false)
            {
                $("#checkall").attr('checked',false);
                $(this).closest('tr').css("background-color","#ffffff");
            }
            if(this.checked == true)
            {
                $(this).closest('tr').css("background-color","#FC9A01");
                CheckSelectAll();
            }
        if(this.checked == false)
        {
            $(this).closest('tr').css("background-color","#ffffff");
        }
});

function CheckSelectAll()
{
    var flag = true;
    $('input:checkbox:not(#checkall)').each(function() {
        if(this.checked == false)
        flag = false;
    });
    $("#checkall").attr('checked',flag);
}

I'm sorry for this mistake. Since you click on the input, who is in the entire tr two events are triggered. So you need to assing click events on all cells, except those who checkboxes are in. Here is the fix:

$('tr').find('td:gt(0)').click(function() {
    var checkbox = $(this).parent().find('td:first').find('input');
    if(checkbox.is(':checked')) {
        checkbox.attr('checked', false);
    }else {
        checkbox.attr('checked', true);
    }
});

$('tr#chkrow').find('th:gt(0)').click(function() {
    var checkbox = $('input#checkall');
    if(checkbox.is(':checked')) {
        checkbox.attr('checked', false);
    $('tr').find('td:first').find('input').attr('checked', false);
    }else {
        checkbox.attr('checked', true);
    $('tr').find('td:first').find('input').attr('checked', true);
    }
});
});

</script>
</head>
<body>
    <table width="50%" cellspacing="0" border="0" align="left" id="tblDisplay" cellpading="0"
style="font-family: verdana; font-size: 10px;">
    <thead>
    <tr id="chkrow">
        <th>
            <input type="checkbox" id="checkall" />
        </th>
    <th>
    Sr.
    </th>
    <th style="text-align: left;">
        First Name
    </th>
    <th style="text-align: left;">
        Last Name
    </th>
    <th>
        Country
    </th>
    <th>
    Marital Status
    </th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: center;">
<input type="checkbox" value="1" />
</td>
<td style="text-align: center;">
1
</td>
<td style="text-align: left;">
Adeel
</td>
<td style="text-align: left;">
Fakhar
</td>
<td style="text-align: center;">
Pakistan
</td>
<td style="text-align: center;">
Single
</td>
</tr>
<tr>
<td style="text-align: center;">
<input type="checkbox" value="2" />
</td>
<td style="text-align: center;">
2
</td>
<td style="text-align: left;">
Omer
</td>
<td style="text-align: left;">
Fakhar
</td>
<td style="text-align: center;">
Pakistan
</td>
<td style="text-align: center;">
Single
</td>
</tr>
<tr>
<td style="text-align: center;">
<input type="checkbox" value="3" />
</td>
<td style="text-align: center;">
3
</td>
<td style="text-align: left;">
Umer
</td>
<td style="text-align: left;">
Mukhtar
</td>
<td style="text-align: center;">
Pakistan
</td>
<td style="text-align: center;">
Single
</td>
</tr>
<tr>
<td style="text-align: center;">
<input type="checkbox" value="4" />
</td>
<td style="text-align: center;">
4
</td>
<td style="text-align: left;">
Mark
</td>
<td style="text-align: left;">
Waugh
</td>
<td style="text-align: center;">
Australia
</td>
<td style="text-align: center;">
Married
</td>
</tr>
</tbody>
</table>
</body>
</html>
于 2012-12-10T06:40:50.503 に答える
0

これを参照してください：http://jsfiddle.net/RtcBR/3/

$(document).ready(function() {
var flag = false;
var flag2 = false;
$("#checkall").click(function(event) {
    $('input:checkbox:not(#checkall)').attr('checked', this.checked);
    if ($(this).attr("checked")) {
        $("#tblDisplay").find('tr:not(#chkrow)').each(function() {
            $(this).css("background-color", "#FC9A01");
        });
    }
    else {
        $("#tblDisplay").find('tr:not(#chkrow)').each(function() {
            $(this).css("background-color", "#FFF");
        });
    }
    flag2 = true;
});

$('input:checkbox:not(#checkall)').click(function(event) {
    if ($("#checkall").attr('checked') && !this.checked) {
        $("#checkall").attr('checked', false);
        $(this).closest('tr').css("background-color", "#ffffff");
    }
    if (!$("#checkall").attr('checked') && this.checked) {
        if ($('input:checkbox:not(#checkall)').filter(":not(:checked)").length === 0) {
            $("#checkall").attr('checked', true);
        }
    }
    if (this.checked) {
        $(this).closest('tr').css("background-color", "#FC9A01");
        flag = true;
    }
    if (!this.checked) {
        $(this).closest('tr').css("background-color", "#ffffff");
        flag = true;
    }
});

$('tr').click(function() {

    if (!flag) {
        var checkbox = $(this).find('td:first').find('input');
        if (checkbox.is(':checked')) {
            checkbox.attr('checked', false);
            checkbox.closest('tr').css("background-color", "#FFF");
        } else {
            checkbox.attr('checked', true);
            checkbox.closest('tr').css("background-color", "#FC9A01");
        }
    }
    flag = false;
});
$('tr#chkrow').click(function() {
    if (!flag2) {
        var checkbox = $(this).find('th:first').find('input');
        if (checkbox.is(':checked')) {
            checkbox.attr('checked', false);
            $('tr').find('td:first').find('input').attr('checked', false);
            $("#tblDisplay").find('tr:not(#chkrow)').each(function() {
            $(this).css("background-color", "#FFF");
        });
        } else {
            checkbox.attr('checked', true);
            $('tr').find('td:first').find('input').attr('checked', true);
            $("#tblDisplay").find('tr:not(#chkrow)').each(function() {
            $(this).css("background-color", "#FC9A01");
        });
        }
    }
    flag2 = false;
});
});​
于 2012-12-10T10:57:11.157 に答える