get value from checkbox but not the word from checkbox - html

Question

I have two checkbox and under this when tick one of two checkbox I have two another option checkbox and another tick there will be text. The text will be value from the checkbox, how can I get the value from this checkbox? But the text I want to put are different sentence for each option checkbox selected not the word from checkbox. Did anyone know?
And my another problem is the checkbox not working if I do not tick the first checkbox.
<script type="text/javascript">
function ShowHideDiv(Cat) {
var dvCat = document.getElementById("bigCat");
bigCat.style.display = Cat.checked ? "block" : "none";
}
</script>
<label for="Cat">
<input type="checkbox" id="Cat" onclick="ShowHideDiv(this)" /> Cat
</label>
<script type="text/javascript">
function ShowHideDiv2(Rabbit) {
var bigRabbit = document.getElementById("bigRabbit");
bigRabbit.style.display = Rabbit.checked ? "block" : "none";
}
</script>
<label for="Rabbit">
<input type="checkbox" id="Rabbit" onclick="ShowHideDiv2(this)" /> Rabbit
</label>
<div id="bigCat" style="display: none">
<label>
<input type="checkbox" id="bigSubCat" /> British shorthair
</label>
<label>
<input type="checkbox" id="bigSubCat" /> Exotic Shorthair
</label>
<div id="bigRabbit" style="display: none">
<label>
<input type="checkbox" id="bigSubRabbit" /> White Rabbit
</label>
<label>
<input type="checkbox" id="bigSubRabbit" /> Black Rabbit
</label>

Answer 1

Add value attribute to the checkbox. and set value to the checkbox.Or you can take the text from the label
<script type="text/javascript">
function ShowHideDiv(Cat) {
var dvCat = document.getElementById("bigCat");
bigCat.style.display = Cat.checked ? "block" : "none";
console.log(Cat.value)
console.log("Text Inside LABEL:" + Cat.parentNode.textContent )
}
</script>
<label for="Cat">
<input type="checkbox" id="Cat" onclick="ShowHideDiv(this)" value="cat"/> Cat
</label>
<script type="text/javascript">
function ShowHideDiv2(Rabbit) {
var bigRabbit = document.getElementById("bigRabbit");
bigRabbit.style.display = Rabbit.checked ? "block" : "none";
console.log(Rabbit.value)
console.log("Text Inside LABEL:" + Rabbit.parentNode.textContent )
}
</script>
<label for="Rabbit">
<input type="checkbox" id="Rabbit" onclick="ShowHideDiv2(this)" value="Rabbit"/> Rabbit
</label>
<div id="bigCat" style="display: none">
<label>
<input type="checkbox" id="bigSubCat" /> British shorthair
</label>
<label>
<input type="checkbox" id="bigSubCat" /> Exotic Shorthair
</label>
</div>
<div id="bigRabbit" style="display: none">
<label>
<input type="checkbox" id="bigSubRabbit" /> White Rabbit
</label>
<label>
<input type="checkbox" id="bigSubRabbit" /> Black Rabbit
</label>

Answer 2

I think you can follow this simple logic:
https://jsfiddle.net/pablodarde/6p7zkfwf/
HTML
<div class="container">
<div class="row">
<input type="checkbox" value="This is option one!" id="opt1"><label for="opt1">Option One</label>
<p></p>
</div>
<div class="row">
<input type="checkbox" value="This is option two!" id="opt2"><label for="opt2">Option Two</label>
<p></p>
</div>
</div>
JavaScript
const checkboxes = document.querySelectorAll('.container input[type=checkbox]');
for (let i = 0, l = checkboxes.length; i < l; i++) {
checkboxes[i].addEventListener('click', (e) => {
if(checkboxes[i].parentNode.querySelector('p').innerHTML == "") {
checkboxes[i].parentNode.querySelector('p').innerHTML = checkboxes[i].value;
} else {
checkboxes[i].parentNode.querySelector('p').innerHTML = "";
}
});
}
CSS
.row {
padding-bottom: 10px;
border-bottom: 1px solid black;
}