CODEWITHSUNDEEP
javascriptjquerycheckboxunchecked
Kamalpreet Singh
Kamalpreet Singh

Reputation: 143

jQuery Uncheck other checkbox on one checked from same row

Hello
I would like to tell you that I know there are lots of solved example on stack overflow regarding the same issues.But My query is bit complex and make me sick.I have large number of table that consist of 10 rows and 9 columns. All I want is when user check the NONE checkbox for STROKE, other checkbox unchecked from the same row.I have to do it for every row. and if Other checkbox checked (user can check multiple either PARENT,UNCLE,OTHERS,etc.),NONE checkbox will unchecked. Incase of query ask me. I am trying from last 2 days for the same, but can successed in it. Please Help me Thanks in advance.

HEART     NONE     PARENT     UNCLE/AUNT     GRANDPARENT    OTHERS
===============================================================
STROKE    enter image description here                enter image description here                     enter image description here                           enter image description here                        enter image description here
ATTACK     enter image description here                enter image description here                     enter image description here                           enter image description here                        enter image description here
B.P.             enter image description here                enter image description here                     enter image description here                           enter image description here                        enter image description here



BLOOD     NONE     PARENT     UNCLE/AUNT     GRANDPARENT    OTHERS
===============================================================
ANEMIA    enter image description here                enter image description here                     enter image description here                           enter image description here                        enter image description here
IMMUNE   enter image description here                enter image description here                     enter image description here                           enter image description here                        enter image description here
LUKEMIA   enter image description here                enter image description here                     enter image description here                           enter image description here                        enter image description here

Upvotes: 4

Views: 5770

Answers (6)

darshan invorg
darshan invorg

Reputation: 1

$(".checkAll").on("change",function(){
   if($(this).is(":checked")) 
   $(this).closest("tr").find(".check").prop('checked',true);
   else
    $(this).closest("tr").find(".check").prop('checked',false);

});
td:first-child{
background-color:yellow
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table >
    <tbody>
        <tr>
            <td><input type="checkbox" class="checkAll" />check All1</td>
            <td><input type="checkbox" class="check" />check 1</td>
            <td><input type="checkbox" class="check" />check 1</td>
        </tr>
        <tr>
            <td><input type="checkbox"  class="checkAll"  />check All2</td>
            <td><input type="checkbox"  class="check" />check 2</td>
            <td><input type="checkbox"  class="check"/>check 2</td>
        </tr>
    </tbody>
</table>

Upvotes: 0

Dan Walters
Dan Walters

Reputation: 1376

My solution was to uncheck all the closest checkboxes and recheck the clicked one. (Works with tables)

<script>
    $(document).ready(function() {  
        $(':checkbox').on('change', function() {
            $(this).closest('tr').find(':checkbox').prop('checked', false);
            $(this).prop('checked', true);
          });  
   });
</script>

Upvotes: 2

Yogendrasinh
Yogendrasinh

Reputation: 895

    <!DOCTYPE html>
<html>
<head>
    <title>Checkbox selection</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>

<table>
    <tr>
        <th>HEART</th>
        <th>NONE</th>
        <th>PARENT</th>
        <th>UNCLE/AUNT</th>
        <th>GRANDPARENT</th>
        <th>OTHERS</th>
    </tr>

    <tr>
        <td>STROKE</td>
        <td class="strokeTD"><input type="checkbox" class="Strokeclass" name="heart"></td>
        <td class="strokeTD"><input type="checkbox" class="Strokeclass" name="none"></td>
        <td class="strokeTD"><input type="checkbox" class="Strokeclass" name="parent"></td>
        <td class="strokeTD"><input type="checkbox" class="Strokeclass" name="uncle"></td>
        <td class="strokeTD"><input type="checkbox" class="Strokeclass" name="grandparent"></td>
        <td class="strokeTD"><input type="checkbox" class="Strokeclass" name="others"></td>
    </tr>

    <tr>
        <td>ATTACK</td>
        <td class="attackTD"><input type="checkbox" class="Strokeclass" name="heart"></td>
        <td class="attackTD"><input type="checkbox" class="Strokeclass" name="none"></td>
        <td class="attackTD"><input type="checkbox" class="Strokeclass" name="parent"></td>
        <td class="attackTD"><input type="checkbox" class="Strokeclass" name="uncle"></td>
        <td class="attackTD"><input type="checkbox" class="Strokeclass" name="grandparent"></td>
        <td class="attackTD"><input type="checkbox" class="Strokeclass" name="others"></td>
    </tr>

    <tr>
        <td>B.P.</td>
        <td class="bpTD"><input type="checkbox" class="Strokeclass" name="heart"></td>
        <td class="bpTD"><input type="checkbox" class="Strokeclass" name="none"></td>
        <td class="bpTD"><input type="checkbox" class="Strokeclass" name="parent"></td>
        <td class="bpTD"><input type="checkbox" class="Strokeclass" name="uncle"></td>
        <td class="bpTD"><input type="checkbox" class="Strokeclass" name="grandparent"></td>
        <td class="bpTD"><input type="checkbox" class="Strokeclass" name="others"></td>
    </tr>
</table>

</body>
<script type="text/javascript">
    $(document).on('click','.Strokeclass',function(){

        var js_class = $(this).parent().attr('class');
        var js_slected = $(this).attr('name');

        if(js_slected == 'none')
        {
            $( '.'+js_class ).each(function( ) {
                if($(this).children().attr('name') != 'none')
                {$(this).children().prop('checked', false);}
            });
        }
        else if(js_slected == 'others')
        {
            $( '.'+js_class ).each(function( ) {
                if($(this).children().attr('name') == 'none')
                {$(this).children().prop('checked', false);}
            });
        }
    });
</script>
</html>

Upvotes: 1

lalithkumar
lalithkumar

Reputation: 3540

Use the same class for same row.In each row you can give different class name and do further same.I given you one row the sample.

$(function(){
$("input[type='checkbox']").click(function(){
if($(this).prop('checked') == true && $(this).attr('class')=='none'){

$(this).closest("tr").find("input[type='checkbox']").each(function(){
$(this).prop('checked', false);
});
$(this).prop('checked',true);

}
else{
$(this).closest("tr").find("input[type='checkbox']").each(function(){
$(this).closest('.none').prop('checked',false);
});
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border='0'>
<tr><th>HEART</th><th>NONE</th><th>PARENT</th><th>UNCLE/AUNT</th><th>GRANDPARENT</th><th>OTHERS</th><tr>
<tr><td>STROKE</td><td><input type='checkbox' class='none'></td><td><input type='checkbox' class='stroke'></td><td><input type='checkbox' class='stroke'></td><td><input type='checkbox' class='stroke'></td><td><input type='checkbox' class='stroke'></td></tr>
<tr><td>ATTACK</td><td><input type='checkbox' class='none'></td><td><input type='checkbox' class='attack'></td><td><input type='checkbox' class='attack'></td><td><input type='checkbox' class='attack'></td><td><input type='checkbox' class='attack'></td></tr>
</table>

Upvotes: 5

Vardan
Vardan

Reputation: 11

This will work ;)

<div>
        <input type="checkbox" name="none" value="" id="none">
        <input type="checkbox" name="parent" value="" id="parent" class="otherThanNone">
        <input type="checkbox" name="uncle" value="" id="uncle" class="otherThanNone">
        <input type="checkbox" name="aunt" value="" id="aunt" class="otherThanNone">
    </div>
    <script>
        $(document).ready(function(){
            if($('#none').prop('checked')==false){
                $('#none').click(function(){
                    for(var i=0; i<3; ++i){
                        if($('.otherThanNone').eq(i).prop('checked')==true){
                            $('.otherThanNone').eq(i).prop('checked', false);
                        }
                    }
                });
            }
            $('#parent').click(function(){
                $('#none').prop('checked', false);
                console.log('a');
            });
        });
    </script>

Upvotes: 1

Farhad Bagherlo
Farhad Bagherlo

Reputation: 6699

$(".checkAll").on("change",function(){
   if($(this).is(":checked")) 
   $(this).closest("tr").find(".check").prop('checked',true);
   else
    $(this).closest("tr").find(".check").prop('checked',false);

});
td:first-child{
background-color:yellow
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table >
	<tbody>
		<tr>
			<td><input type="checkbox" class="checkAll" />check All1</td>
			<td><input type="checkbox" class="check" />check 1</td>
			<td><input type="checkbox" class="check" />check 1</td>
		</tr>
		<tr>
			<td><input type="checkbox"  class="checkAll"  />check All2</td>
			<td><input type="checkbox"  class="check" />check 2</td>
			<td><input type="checkbox"  class="check"/>check 2</td>
		</tr>
	</tbody>
</table>

Upvotes: 2

Related Questions