Question

好吧，我有一种感兴趣的形式，当我从选择列表中选择一个选项（例如汽车，电机）时，它给了我与选项有关的内容。

这是测试页面 - ＆gt; Here

我还为每个部分（从上面的实例）创建了复选框，我想在检查特定复选框（.other）时显示详细信息的文本框（.textbox），当我取消选中它时默认隐藏。我给了这个特定的复选框，每个textarea为每个部分提供了相同的类。对于复选框 - ＆gt; .other和textarea - ＆gt; .textbox

这是每个部分的代码（复选框）：

汽车

<ul style="list-style-type: none;">
   <li><label for="thrausi"><input type="checkbox" name="thrausi" id="thrausi">text</label></li>
   <li><label for="odiki-car"><input type="checkbox" name="odiki-car" id="odiki-car"text</label></li>
   <li><label for="nomiki"><input type="checkbox" name="nomiki" id="nomiki">text</label></li>
   <li><label for="other-car"><input type="checkbox" class="other">**Other details**</label></li>
</ul>
<textarea class="textbox" name="other" style="display:none; width: 255px;" placeholder="text"></textarea>

电动机

<ul style="list-style-type: none;">
   <li><label for="odiki-moto"><input type="checkbox" name="odiki-moto" id="odiki-moto">text</label></li>
   <li><label for="other"><input type="checkbox" class="other">**Other details**</label></li>
  </ul>
<textarea class="textbox" name="other" style="display:none; width: 255px;" placeholder="text"></textarea>

我尝试了这个JS代码：

<script type="text/javascript">
window.onload=function(){
var elem = document.getElementByClassName('textbox'),
    checkBox = document.getElementByClassName('other');
checkBox.checked = false;
checkBox.onchange = function() {
    elem.style.display = this.checked ? 'block' : 'none';
};
checkBox.onchange();
}
</script>

但我做错了什么。你有什么建议？提前谢谢。

Answer 1

用作

<script>
    $(function(){   
        $(".other").click(function(){
            if((this).is(":checked")==true)
            {
                $(".textbox").show();
            }
            else
               $(".textbox").hide();
        });
    })
</script>

Answer 2

检查演示[Click Here]

选择带其他的复选框时，您希望显示相应的 textarea

您可以使用以下代码段进行解析。

$(document).ready(function () {
        $(".other").change(function () {
            if ($(this).is(":checked"))
                $(this).parent().parent().parent().next(".textbox").show();
            else
                $(this).parent().parent().parent().next(".textbox").hide();
        });
    });

Answer 3

我已经调整了你的代码

jQuery代码：

  $('.other').removeAttr('checked');
  $('.other').on('click', function () {
    $(this).closest("div.par").find('.textbox').toggle();
  });

<强>的jsfiddle：

http://jsfiddle.net/dreamweiver/1y47bxfh/4/

注意：当您在代码中使用jquery lib时，请确保使用它，不要使用原始js代码。标语本身建议使用write less do more。

快乐编码：）

通过具有相同类的复选框隐藏/显示textarea，用于不同的部分

3 个答案: