input radio does not hide content when unchecked-CodePudding

input radio does not hide content when unchecked, i can't make the content be hidden when the radio input is unchecked

how can I hide the content of the unmarked radio input? clicking on another radio input is unchecked but does not hide the content

$('#alternar').click(function () {
    $('#prueba').toggle();
});

$('#alternarx').click(function () {
    $('#pruebax').toggle();
});

/* commented out because this select doesn't appear in the HTML:
  $(".placeholder").select2({
  placeholder: "Make a Selection",
  allowClear: true
  }); 
*/

function uncheckAndCheck(event) {

    // gets all radios with the name prefix like 'custom-radio-'
    // and uncheck all of them
    document.querySelectorAll("input[type='radio'][name^='custom-radio-']").forEach(radio => {
        radio.checked = false;
    });

    // checks the radio that triggered the click event
    event.target.checked = true;

}

#prueba{
          
           display:none
        }
        #pruebax{
      
          display:none
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>


         <input type="radio" class="new-control-input" name="custom-radio-1" id="alternarx" onclick="uncheckAndCheck(event)"/>
        
        <div id="prueba"> Content1 </div>
        
        <input type="radio" class="new-control-input" name="custom-radio-2" id="alternar" onclick="uncheckAndCheck(event)"/>
        
        <div id="pruebax"> Content2 </div>

CodePudding user response：

This is actually possible entirely with CSS. You can use the adjacent sibling combinator , which affects an element immediately following the first.

#prueba{
    display: none;
}
#pruebax{
    display: none;
}
input:checked   #prueba,
input:checked   #pruebax {
    display: block;
}

<input type="radio" class="new-control-input" name="custom-radio-1" id="alternarx" onclick="uncheckAndCheck(event)"/>

<div id="prueba"> Content1 </div>

<input type="radio" class="new-control-input" name="custom-radio-2" id="alternar" onclick="uncheckAndCheck(event)"/>

<div id="pruebax"> Content2 </div>

CodePudding user response：

George's solution works, but is reliant upon the HTML never changing. If you add any element between the checkbox and the div, it will break the functionality.

To answer your question related to JavaScript:

It's unnecessary to check and uncheck the other radio inputs. You just need to give them the same name attribute.

Second, you're .toggle()ing the divs on click. That might be why they're acting strangely. You're not checking if the radio button is selected or not, and that's going to result in them toggling even when you click them when they're already selected. Luckily, you can just listen for them to change states.

Third, you can hold a selector for the target of the radio button you want to show/hide in a data attribute, and use one function for all of this.

Forth, why mix inline onclick attributes, when you're using jQuery? Just listen for the event using the built-in listeners in jQuery.

//jQuery shorthand for $(document).ready(function(){ to be sure your DOM has loaded:
$(function() {

    //run this on page load, too. Necessary because browsers will remember which one is checked on a page *refresh*, and hides the target divs initially when nothing is checked:
    
    $checkedRB = $(".rbToggleDiv:checked");
      
    if($checkedRB.length > 0) {
      toggleVisibleDivs($checkedRB);
    } else {
      toggleVisibleDivs(false);
    }
  
    //both radio buttons have the same class as well, so you can listen for either of them to change states:
    $(document).on("change", ".rbToggleDiv", function(e) {
      //this = radio button that has changed
      var $thisRB = $(this); //turn it into a jQuery object
      
      if($thisRB.prop("checked")) { //only do something if this RB is checked
        toggleVisibleDivs($thisRB);
      }
    });
  
    function toggleVisibleDivs($targetRB) {
      if ($targetRB === false) { //no target sent in
        
        //hide all 
        $(".pruebaDiv").hide(); //hide all divs
        
      } else { //target sent in
      
        if ($targetRB.data("target-div")) { //make sure the data is set
          var targetSelector = $targetRB.data("target-div"), //grab the string from the data object
              $targetDiv = $(targetSelector); //use it to select the target div
  
              if ($targetDiv.length > 0) { //make sure the div is selected
                //hide all divs with the same class:
                $(".pruebaDiv").hide();
  
                //then, show only the one you want visible, the $targetDiv:
                $targetDiv.show();
              } else {
                console.error("Div not found!", targetSelector);
              }
        } else {
          //data not set:
          console.error("Data was not set.");
        }
      
      }
    }
  });

.pruebaDiv {
    display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- if they have the same names, they will act as a radio button list, and will act accordingly. Also, you should really choose more descriptive IDs and names: -->

<input type="radio" class="rbToggleDiv" name="rb-toggle-div" id="alternarx" data-target-div="#prueba" />
<input type="radio" class="rbToggleDiv" name="rb-toggle-div" id="alternar" data-target-div="#pruebax" />

<!-- for the sanity of the user, I've moved these two divs next to each other below the radio buttons so they don't move around: -->
<div class="pruebaDiv" id="prueba"> Content1 </div>
<div class="pruebaDiv" id="pruebax"> Content2 </div>