How to Uncheck All Below Checkboxes When One Checkbox Is Unchecked

$('#wrapper .some-checkbox').on('change', function() {  var $this = $(this);  if ($this.prop('checked')) {    if ($this.is('.some-others')) {      $this.siblings().prop('checked', false);    }    else {      $this.siblings('.some-others').prop('checked', false);    }   }});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div id="wrapper">  <input class="some-checkbox" type="checkbox" value="Heating">Heating<br>  <input class="some-checkbox" type="checkbox" value="Ac">AC<br>  <input class="some-checkbox" type="checkbox" value="Cold Chain">Cold Chain<br>  <input class="some-checkbox some-others" type="checkbox" value="Others">Others<br></div>

How to uncheck all checkboxes, if one checkbox checked?

Define an id into the any checkbox, like this:

<label class="checkbox-inline">
  <input type="checkbox" id="" value="1"> information
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="" value="2"> information
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="" value="3"> information
</label>        
<label class="checkbox-inline">
  <input type="checkbox" id="any-checkbox" value="4"> any
</label>

I suggest this because it is not a good idea to use the fact that it is the fourth. If you add another checkbox in the future before it, then it will no longer be the fourth.

    //We use .on to tackle with the dynamic nature of the HTML
    $( "body" ).on( "change", ".checkbox-inline > input[type=checkbox]", function() {
        if ($(this).attr("id") === "any-checkbox") { //Any checkbox tick
            if ($(this).prop("checked")) { //User checked any
                //Other checkboxes are unchecked
                $(".checkbox-inline > input[type=checkbox]:not(#any-checkbox)").prop("checked", false)
            }
        } else { //Other checkbox tick
            if ($(this).prop("checked")) {//User checked another checkbox
                //Any checkbox is unchecked
                $("#any-checkbox").prop("checked", false);
            }
        }
    });

EDIT: As per the comment, I have solved the issue for multiple groups, like this:

<label class="checkbox-inline">
  <input type="checkbox" id="" name="hairColor" value="1"> information
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="" name="hairColor" value="2"> information
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="" name="hairColor" value="3"> information
</label>        
<label class="checkbox-inline">
  <input type="checkbox" id="hairColor" name="hairColor" value="4" class="any"> any
</label>
   <br> 
<label class="checkbox-inline">
  <input type="checkbox" id="" name="eyeColor" value="1"> eyeColor
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="" name="eyeColor" value="2"> eyeColor
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="" name="eyeColor" value="3"> eyeColor
</label>        
<label class="checkbox-inline">
  <input type="checkbox" id="eyeColor" name="eyeColor" class="any" value="4"> any
</label>

//We use .on to tackle with the dynamic nature of the HTML
$( "body" ).on( "change", ".checkbox-inline > input[type=checkbox]", function() {
    if ($(this).hasClass("any")) { //Any checkbox tick
        if ($(this).prop("checked")) { //User checked any
            //Other checkboxes are unchecked
            $(".checkbox-inline > input[type=checkbox][name=" + $(this).attr("name") + "]:not(.any)").prop("checked", false)
        }
    } else { //Other checkbox tick
        if ($(this).prop("checked")) {//User checked another checkbox
            //Any checkbox is unchecked
            $("[name=" + $(this).attr("name") + "].any").prop("checked", false);
        }
    }
});

Check all checkboxes, and uncheck if any of them deselected in React without jQuery

One way of going about it is to add an extra property called e.g. isChecked to the data you get from the network request, and use that to control all the
checkboxes.

Example

const posts = [  {    id: 1,    name: "Text 1"  },  {    id: 2,    name: "Text 2"  },  {    id: 3,    name: "Text 3"  }];
class App extends React.Component {  state = {    name: "React",    posts: [],    isAllChecked: false  };
  componentDidMount() {    setTimeout(() => {      this.setState({        posts: posts.map(post => ({ ...post, isChecked: false }))      });    }, 1000);  }
  handleSelect = id => {    this.setState(prevState => {      const posts = prevState.posts.map(post =>        post.id === id ? { ...post, isChecked: !post.isChecked } : post      );      const isAllChecked = posts.every(post => post.isChecked);
      return { posts, isAllChecked };    });  };
  handleSelectAll = () => {    this.setState(prevState => {      const isAllChecked = !prevState.isAllChecked;      const posts = prevState.posts.map(post => ({        ...post,        isChecked: isAllChecked      }));
      return { posts, isAllChecked };    });  };
  render() {    const { posts, isAllChecked } = this.state;
    return (      <div>        {posts.map(fx => (          <TableItem            key={fx.id}            id={fx.id}            name={fx.name}            checked={fx.isChecked}            onChange={() => this.handleSelect(fx.id)}          />        ))}        <div>          <label>            <input              type="checkbox"              checked={isAllChecked}              onChange={this.handleSelectAll}            />            Select all          </label>        </div>      </div>    );  }}
class TableItem extends React.Component {  render() {    const { checked, onChange, name } = this.props;
    return (      <tr>        <td>          <input type="checkbox" checked={checked} onChange={onChange} />        </td>        <td>{name}</td>      </tr>    );  }}
ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

function selectAll(source) {
         checkboxes = document.querySelector('funnel[]'); 
                for(i=0;i<checkboxes.length;i++)
                checkboxes[i].checked = source.checked;
    }

function selectAll(source) {
  var checkboxes = document.querySelectorAll('.funnel'); 
  for(i=0;i<checkboxes.length;i++)     checkboxes[i].checked = source.checked;}    function unSelect(element) {if(!element.checked){// uncheck "select all" when 1,2 or 3 is unchecked  document.querySelector('#selectall').checked = false;  // if you want to unselect also the others checkboxes of the class "funnel",uncomment the following block  /*var others = document.querySelectorAll('.funnel'); 
  for(i=0;i<others.length;i++)     others[i].checked = false;*/  }else{// check "select all" when 1, 2, 3 is checked  document.querySelector('#selectall').checked = true;}  }

<input type="checkbox" onclick="selectAll(this)" id="selectall"/> all select <br>
<input type="checkbox" class = "funnel" onclick="unSelect(this)"/> 1 <br><input type="checkbox" class = "funnel" onclick="unSelect(this)"/> 2 <br><input type="checkbox" class = "funnel" onclick="unSelect(this)"/> 3 <br>

checkAll() { 
          let checkdata=[];
          this.checkdata.forEach((i,x)=> {
             checkdata.push({"name": i.name, "checked": true});

             if (x==this.checkdata.length-1){
               this.set('checkdata', checkdata);
               console.log(checkdata);
            }
          })

}

uncheckAll() {
         let checkdata=[];
          this.checkdata.forEach((i,x)=> {
             checkdata.push({"name": i.name, "checked": false});

             if (x==this.checkdata.length-1){
               this.set('checkdata', checkdata);
               console.log(checkdata);
            }
          })

}