Sorry I just got It. My recommendation is to use vue.js
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="app">
<input v-model="a" type="checkbox">
<div v-if="a">
<input v-model="b" type="checkbox">
<div v-if="b">
<input v-model="c" type="checkbox">
<div v-if="c">
<input v-model="message">
<button v-on:click="shoot()">Shoot!</button>
</div>
</div>
</div>
<div>a: ${a}, b:${b}, c:${c}, message:${message}</div>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
delimiters: ['${', '}'],
data: {
a: false,
b: false,
c: false,
message: 'Hello Vue!'
},
methods: {
shoot() { alert('shoot ' + app.message); }
}
});
</script>
</html>
You can use {{=ASSIGNJS(x=y)}} to pass a web2py variable y to a js variable x.