JSFiddle - React, Tailwind, and code Playground

by superj80820

HTML

<script src="https://unpkg.com/rxjs/bundles/rxjs.umd.min.js"></script>
<input type="checkbox" id="dog">dog
<input type="checkbox" id="cat">cat
<div id="last"></div>
<div id="all"></div>

JavaScript

const { merge, fromEvent } = rxjs

document.getElementById('dog').onclick = () => {
	if (document.getElementById('dog').checked === true) document.getElementById('last').innerHTML = 'last checked dog'
  
}

document.getElementById('cat').onclick = () => {
	if (document.getElementById('cat').checked === true) document.getElementById('last').innerHTML ='last checked cat'
}

merge(
	fromEvent(document.getElementById('dog'), 'click'),
	fromEvent(document.getElementById('cat'), 'click')
)
.subscribe(() => {
	const text = []
	if (document.getElementById('dog').checked === true) text.push('cat')
  if (document.getElementById('cat').checked === true) text.push('dog')
  document.getElementById('all').innerHTML = `All ${text.join(' ,')} checked`
})