Kontrollkästchenoptionen ausblenden und aufdecken - Jquery aufräumen

Question

Also bin ich ein relativer Neuling für JS und die Jquery-Bibliothek. Ich habe mit etwas herumgespielt und kann sehen, dass es extrem unordentlich ist. Hier hoffte ich, dass ihr mir helfen könnt, einen besseren Weg vorzuschlagen, um das zu erreichen, was ich erreichen möchte.

Ziel:

mehrere Kontrollkästchen haben, setzen Sie von Kontrollkästchen, von denen einige ausgewählt, wenn eine Unter offenbaren. Wenn das übergeordnete Element deaktiviert ist, sollten die untergeordneten Kontrollkästchen ebenfalls deaktiviert werden.

HTML (dies vereinfacht)

<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(); 

Ich habe eine schnelle JSFiddle zusammen besser zu demonstrieren!

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

Jede Beratung ist sehr zu schätzen!

Answer 1

Ich habe hinzugefügt Klasse für Eltern Checkbox und dem div-Container, die alle untergeordneten Kontrollkästchen haben. Auf diese Weise können wir den js-Code reduzieren.

Bitte überprüfen Sie den folgenden Code.

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(); 
    } 
}); 
}); 

Als Referenz ich diese mit Klassen Fiddle

Answer 2

Basierend auf meinem Verständnis zu Ihrer Frage, haben Sie zwei Anforderungen,

1. Um mehrere Kontrollkästchen haben, von denen einige ausgewählt, wenn eine Unter von Kontrollkästchen gesetzt offenbaren.

2. Wenn das übergeordnete Element deaktiviert ist, sollten die untergeordneten Kontrollkästchen ebenfalls deaktiviert werden.

Ich glaube, Sie zum ersten Mal bereits getan haben, und um Hilfe zu bitten zwei zu implementieren,

ich für die zweite Implementierung eine Geige geschaffen,

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

Verwenden prop statt attr zum Umschalten checked oder disabled Eigenschaft in jquery

Answer 3

Dies sollte Ihr Code sein. Und ich AKTUALISIERT Ihre 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

Hier ein Beispiel erstellt haben, statt id (mit uncheck auf Mutter aktualisiert -Option klicken)

JS dann 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>