隐藏和显示复选框选项 - 收拾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

Answer 2

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

1. 有多个复选框，如果选择了其中一些揭示一个子集的复选框。

2. 如果未选中父项，则子项复选框也应该取消选中。

相信你已经先已完成，寻求帮助，以实现两个，

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

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

使用prop代替attr用于切换checked或disabled财产jquery

Answer 3

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