jQuery Uncheck other checkbox on one checked from same row

Question

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
ATTACK
BP

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

Answer 1

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> 

Answer 2

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>

Answer 3

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

Answer 4

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>

Answer 5

    <!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>

Answer 6

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