隱藏和顯示覆選框選項 - 收拾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>