JSFiddle - React, Tailwind, and code Playground

by VixedS

HTML

<form action="pfile.php" method="post" id="findsimilar">
    <table>
    <tr>
        <td>
            <input type="checkbox" name="ckColor" value="red">
            <input type="checkbox" name="ckDarkness" value="8">
        </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" name="ckColor" value="blue">
            <input type="checkbox" name="ckDarkness" value="2">
        </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" name="ckColor" value="green">
            <input type="checkbox" name="ckDarkness" value="5">
        </td>
    </tr>
    </table><br /><br />
    <input type="text" name="color" placeholder="Color" disabled />
    <input type="text" name="darkness" placeHolder="Darkness" disabled />
    <br /><br />
    <input type="submit" name="submit_b"><br /><br /><br />
    In this fiddle I used <b>color</b> and <b>darkness</b> as a text input, you should use them as hidden.
</form>

CSS

body{
  font-family:arial,sans-serif;
  text-align:center;
}
table{
  margin:0 auto;
}

JavaScript

var chkDarkness= $('#findsimilar input[name="ckDarkness"]');
    var chkColors=$('#findsimilar input[name="ckColor"]');
    var getGolor=$('input[name="color"]');
    var getDarkness=$('input[name="darkness"]');
    

    chkColors.on('click',function(){
        var el=$(this);
        var elDark=el.parent().find('input[name="ckDarkness"]');
        chkDarkness.not(elDark).prop('checked',false);
        if (el.is(':checked')){
            chkColors.not(el).prop('checked',false);
            getGolor.val(el.val());
            if (!elDark.is(':checked'))
               getDarkness.val('');
        } else {
           getGolor.val('');
           if (!elDark.is(':checked'))
               getDarkness.val('');

        }
    });
    chkDarkness.on('click',function(){
        var el=$(this);
        var elCol=el.parent().find('input[name="ckColor"]');
        getDarkness.val('');
        chkDarkness.not(el).prop('checked',false);
        chkColors.not(elCol).prop('checked',false);
        if (el.is(':checked'))
           getDarkness.val(el.val());
           if (!elCol.is(':checked'))
               getGolor.val('');
        
    })