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

Answer 2

这是一个使用类而不是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>

Answer 3

根据我对您的问题的理解，您有2个要求，

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

我相信你已经做过第一次并请求帮助实施两个，

我为第二次实施创建了一个小提琴，

小提琴：https://jsfiddle.net/j5pdq8p8/8/

使用prop代替attr切换checked

disabled

jquery

Answer 4

这应该是你的代码。我更新了您的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();

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

4 个答案: