Question

我有两个复选框，当选中两个复选框中的一个时，我有两个另一个选项复选框，另一个勾选将有文本。文本将是复选框中的值，如何从此复选框中获取值？但是我要放的文本是每个选项的不同句子复选框，而不是复选框中的单词。有人知道吗？

我的另一个问题是如果我没有勾选第一个复选框，则复选框无效。

＆＃13;

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

＆＃13;

Answer 1

将值属性添加到复选框。并将值设置为复选框。或者您可以从标签中获取文本

＆＃xA;＆＃xA;

＆＃xD;＆＃xA;

 ＆lt; script type =”text / javascript“＆gt;＆＃xD;＆＃xA;功能ShowHideDiv（Cat）{＆＃xD;＆＃xA; var dvCat = document.getElementById（“bigCat”）;＆＃xD;＆＃xA; bigCat.style.display = Cat.checked？ “阻止”：“无”;＆＃xD;＆＃xA;的console.log（Cat.value）＆＃的xD;＆＃XA; console.log（“LABEL内部文本：”+ Cat.parentNode.textContent）＆＃xD;＆＃xA;＆＃xD;＆＃xA; ＆＃xD;＆＃xA;＆lt; / script＆gt;＆＃xD;＆＃xA;＆＃xD;＆＃xA;＆lt; label for =“Cat”＆gt;＆＃xD;＆＃xA; ＆lt; input type =“checkbox”id =“Cat”onclick =“ShowHideDiv（this）”value =“cat”/＆gt; Cat＆＃xD;＆＃xA;＆lt; / label＆gt;＆＃xD;＆＃xA;＆＃xD;＆＃xA;＆lt; script type =“text / javascript”＆gt;＆＃xD;＆＃xA; function ShowHideDiv2（Rabbit）{＆＃xD;＆＃xA; var bigRabbit = document.getElementById（“bigRabbit”）;＆＃xD;＆＃xA; bigRabbit.style.display = Rabbit.checked？ “block”：“none”;＆＃xD;＆＃xA; console.log（Rabbit.value）＆＃xD;＆＃xA; console.log（“Text Inside LABEL：”+ Rabbit.parentNode.textContent）＆＃xD;＆＃xA; ＆＃xD;＆＃xA;＆lt; / script＆gt;＆＃xD;＆＃xA;＆＃xD;＆＃xA;＆lt; label for =“Rabbit”＆gt;＆＃xD;＆＃xA; ＆lt; input type =“checkbox”id =“Rabbit”onclick =“ShowHideDiv2（this）”value =“Rabbit”/＆gt; Rabbit＆＃xD;＆＃xA;＆lt; / label＆gt;＆＃xD;＆＃xA;＆＃xD;＆＃xA;＆lt; div id =“bigCat”style =“display：none”＆gt;＆＃xD ;＆＃XA;＆＃的xD;＆＃XA; ＆LT;标签＆gt; ＆＃的xD;＆＃XA; ＆lt; input type =“checkbox”id =“bigSubCat”/＆gt;英国短毛猫＆＃xD;＆＃xA;＆lt; / label＆gt;＆＃xD;＆＃xA;＆＃xD;＆＃xA; ＆LT;标签＆gt;＆＃的xD;＆＃XA; ＆lt; input type =“checkbox”id =“bigSubCat”/＆gt; Exotic Shorthair＆＃xD;＆＃xA;＆lt; / label＆gt;＆＃xD;＆＃xA;＆lt; / div＆gt;＆＃xD;＆＃xA; ＆lt; div id =“bigRabbit”style =“display：none”＆gt;＆＃xD;＆＃xA;＆＃xD;＆＃xA; ＆LT;标签＆gt; ＆＃的xD;＆＃XA; ＆lt; input type =“checkbox”id =“bigSubRabbit”/＆gt; White Rabbit＆＃xD;＆＃xA;＆lt; / label＆gt;＆＃xD;＆＃xA;＆＃xD;＆＃xA; ＆LT;标签＆gt;＆＃的xD;＆＃XA; ＆lt; input type =“checkbox”id =“bigSubRabbit”/＆gt; Black Rabbit＆＃xD;＆＃xA;＆lt; / label＆gt;

＆＃xD;＆＃xA;

＆＃xD ;＆＃XA;

＆＃XA;

Answer 2

我认为你可以遵循这个简单的逻辑：

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

从复选框中获取值，但不从复选框中获取单词

2 个答案: