JSFiddle - React, Tailwind, and code Playground

by superj80820

HTML

<script src="https://unpkg.com/[email protected]/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, of } = rxjs
const { mergeMap } = rxjs.operators;

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'
}

of('dog', 'cat')
.pipe(
	mergeMap(id => fromEvent(document.getElementById('dog'), '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`
})