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 plex 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                                                                                            
ATTACK                                                                                             
B.P.                                                                                                     

BLOOD     NONE     PARENT     UNCLE/AUNT     GRANDPARENT    OTHERS
===============================================================
ANEMIA                                                                                            
IMMUNE                                                                                           
LUKEMIA                                                                                           

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 plex 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                                                                                            
ATTACK                                                                                             
B.P.                                                                                                     

BLOOD     NONE     PARENT     UNCLE/AUNT     GRANDPARENT    OTHERS
===============================================================
ANEMIA                                                                                            
IMMUNE                                                                                           
LUKEMIA                                                                                           

• javascript
• jquery
• checkbox
• unchecked

Share Improve this question Follow edited Jul 27, 2017 at 10:42 lalithkumar 3,54044 gold badges2626 silver badges4343 bronze badges asked Jul 27, 2017 at 4:47 Kamalpreet SinghKamalpreet Singh 14322 silver badges1414 bronze badges 2

• @guradio, thankyou for your reply, but I have to check multiple from parent,uncle,grandparent,others. You can say either none or multiple from other columns. – Kamalpreet Singh Commented Jul 27, 2017 at 4:50
• this is the task that I have to do it. Actually this is the medical table , suppose user has some blood related form has to fill, Parent and grandparents and uncle/aunt effected from LUKEMIA or no one is effected from given column. – Kamalpreet Singh Commented Jul 27, 2017 at 4:56

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 5

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

$(".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./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>

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>

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>

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

    <script src="https://ajax.googleapis./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>

$(".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./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>