javascript - 隐藏和显示复选框选项 - 整理 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

我为父复选框和包含所有子复选框的容器 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