隐藏和显示复选框选项 - 整理 Jquery

Question

所以我是 JS 和 Jquery 库的新手。我一直在玩弄一些东西，可以看到它非常不整洁，这就是我希望你们能帮助建议一种更好的方法来实现我想要实现的目标的地方。

目标：

要有多个复选框，其中一些如果被选中会显示一组子复选框。如果父复选框未选中，则子复选框也应取消选中。

HTML（这是简化的）

<div class="option1">
    <input type="checkbox" id="optionA" />
    <div id="suboption1">
        <input type="checkbox" id="optionA1" />
        <input type="checkbox" id="optionA2" />
    </div>
</div>

<div class="option2">
    <input type="checkbox" id="optionB" />
    <div id="suboption2">
        <input type="checkbox" id="optionB1" />
        <input type="checkbox" id="optionB2" />
    </div>
</div>

<div class="option3">
    <input type="checkbox" id="optionC" />
    <div id="suboption3">
        <input type="checkbox" id="optionC1" />
        <input type="checkbox" id="optionC2" />
    </div>
</div>

<!--No sub options on some-->
<div class="option4">
    <input type="checkbox" id="optionD" />
</div>

JS

/*Option 1*/

$("#suboption1").hide();

$("#optionA").click(function() {
    revealOptionA();
});

function revealOptionA(){
    if($('#optionA').is(":checked")) {
        $("#suboption1").show('hide');
    } else {
        $("#suboption1").hide('hide');
        $("#optionA1").attr('checked', false);
        $("#optionA2").attr('checked', false);
    }
}
revealOptionA();

/*Option 2*/

$("#suboption2").hide();

$("#optionB").click(function() {
    revealOptionB();
});

function revealOptionB(){
    if($('#optionB').is(":checked")) {
        $("#suboption2").show('hide');
    } else {
        $("#suboption2").hide('hide');
        $("#optionB1").attr('checked', false);
        $("#optionB2").attr('checked', false);
    }
}
revealOptionB();

/*Option 3*/

$("#suboption3").hide();

$("#optionC").click(function() {
    revealOptionC();
});

function revealOptionC(){
    if($('#optionC').is(":checked")) {
        $("#suboption3").show('hide');
    } else {
        $("#suboption3").hide('hide');
        $("#optionC1").attr('checked', false);
        $("#optionC2").attr('checked', false);
    }
}
revealOptionC();

我整理了一个快速的 JSFiddle 来更好地演示！

https://jsfiddle.net/j5pdq8p8/2/

非常感谢任何建议！

Answer 1

根据我对你问题的理解，你有两个要求，

要有多个复选框，其中一些如果被选中会显示一组子复选框。
如果父复选框未选中，则子复选框也应取消选中。

我相信你已经完成了第一个并请求帮助实现两个，

我为第二次实现创建了一个 fiddle，

fiddle: https://jsfiddle.net/j5pdq8p8/8/

使用 prop 而不是 attr 在 jquery[=37 中切换 checked 或 disabled 属性 =]

Answer 2

这应该是您的代码。我更新了你的 jsFiddle

/*Option 1*/

       $("#suboption1").hide();

        $("#optionA").click(function() {
            revealOptionA();
        });

        function revealOptionA(){
          if($('#optionA').is(":checked")) {
                $("#suboption1").show('hide');
                $("#optionA1").attr('checked', true);
                $("#optionA2").attr('checked', true);
            } else {
                $("#suboption1").hide('hide');
                $("#optionA1").attr('checked', false);
                $("#optionA2").attr('checked', false);
            }
        }
revealOptionA();

/*Option 2*/

       $("#suboption2").hide();

        $("#optionB").click(function() {
            revealOptionB();
        });

        function revealOptionB(){
          if($('#optionB').is(":checked")) {
                $("#suboption2").show('hide');
                $("#optionB1").attr('checked', true);
                $("#optionB2").attr('checked', true);
            } else {
                $("#suboption2").hide('hide');
                $("#optionB1").attr('checked', false);
                $("#optionB2").attr('checked', false);
            }
        }
revealOptionB();

 /*Option 3*/

       $("#suboption3").hide();

        $("#optionC").click(function() {
            revealOptionC();
        });

        function revealOptionC(){
          if($('#optionC').is(":checked")) {
                $("#suboption3").show('hide');
                $("#optionC1").attr('checked', true);
                $("#optionC2").attr('checked', true);
            } else {
                $("#suboption3").hide('hide');
                $("#optionC1").attr('checked', false);
                $("#optionC2").attr('checked', false);
            }
        }
revealOptionC();

Answer 3

我已经为父复选框添加了 class 并且包含所有子复选框的容器 div。使用这种方式我们可以减少js代码。

请检查以下代码。

HTML

<div class="option1">
    <input type="checkbox" id="optionA" class="parent"/>
    <div id="suboption1" class="child">
         <input type="checkbox" id="optionA1" />
          <input type="checkbox" id="optionA2" />
    </div>
</div>

<div class="option2">
    <input type="checkbox" id="optionB" class="parent"/>
    <div id="suboption2" class="child">
         <input type="checkbox" id="optionB1" />
          <input type="checkbox" id="optionB2" />
    </div>
</div>

<div class="option3">
    <input type="checkbox" id="optionC" class="parent"/>
    <div id="suboption3" class="child">
         <input type="checkbox" id="optionC1" />
          <input type="checkbox" id="optionC2" />
    </div>
</div>

<!--No sub options on some-->
<div class="option4">
    <input type="checkbox" id="optionD" />
</div>

JS

$(document).ready(function() {
$(".child").hide();
$(".parent").change(function(){
  if ($(this).prop("checked") == false) {
        $(this).parent().find(".child").find(":checkbox").each(function() {
        $(this).prop('checked', false);
    });
    $(this).parent().find(".child").hide();
  }
  else {
        $(this).parent().find(".child").show();
  }
});
});

为了参考，我创建了这个 Fiddle

Answer 4

这里是一个用类代替 id 的例子（更新为取消选中父选项点击）

JS 然后 HTML

$(".suboptions").toggle();

$('.options').on("click", function() {
  $(this).siblings(".suboptions").toggle();
  $(this).siblings(".suboptions").children().prop( "checked", false );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <input type="checkbox" class="options" />
  <div class="suboptions">
    <input type="checkbox" />
    <input type="checkbox" />
  </div>
</div>
<div>
  <input type="checkbox" class="options" />
  <div class="suboptions">
    <input type="checkbox" />
    <input type="checkbox" />
  </div>
</div>
<div>
  <input type="checkbox" class="options" />
  <div class="suboptions">
    <input type="checkbox" />
    <input type="checkbox" />
  </div>
</div>
<!--No sub options on some-->
<div>
  <input type="checkbox" class="options" />
</div>

隐藏和显示复选框选项 - 整理 Jquery

Hide and reveal checkbox options - Tidy up Jquery

javascript

checkbox

jquery

code-cleanup