Wählen Sie abhängig von Radio Button

Wie kann ich einen <SELECT> sichtbar machen, wenn ein bestimmter <INPUT type="radio"> ausgewählt ist?Wählen Sie abhängig von Radio Button

Ich habe die folgende Funktion am Ende des <BODY>:

<script> 
$('[data-dependent]').each(function() { 
    var $ele = $(this); 
    var dependsOn = $ele.data('dependent'); 
    $.each(dependsOn, function (target, value) { 
     $(target).on('change', function() { 
      if($(this).val() === value) { 
       $ele.show(); 
      } 
      else { 
       $ele.hide(); 
      } 
     }); 
    }); 
}); 
</script>

Mein HTML ist:

$('[data-dependent]').each(function() { 
 
    var $ele = $(this); 
 
    var dependsOn = $ele.data('dependent'); 
 
    $.each(dependsOn, function (target, value) { 
 
     $('[name="'+target+'"]').on('change', function() { 
 
      $ele.toggle($(this).val() === value); 
 
     }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<input type="radio" name="itemOption" id="deleteAllItems" value="deleteAllItems">Delete items 
 
<input type="radio" name="itemOption" id="moveAllItems" value="moveAllItems" checked>Move items 
 

 
<select id="inputCategory" name="category" data-dependent='{"itemOption": "moveAllItems"}'> 
 
    <option>Choose a category to move the items to...</option> 
 
    <option>Category A</option> 
 
    <option>Category B</option> 
 
</select>

<input type="radio" name="itemOption" id="deleteAllItems" value="deleteAllItems">Delete items 
<input type="radio" name="itemOption" id="moveAllItems" value="moveAllItems" checked>Move items 

<select id="inputCategory" name="category" data-dependent='{"itemOption": "moveAllItems"}'> 
    <option>Choose a category to move the items to...</option> 
    <option>Category A</option> 
    <option>Category B</option> 
</select>

Quelle

2016-08-18 Simon Otter

Sie einfach $(target) mit $('[name="'+target+'"]') ersetzen müssen

Quelle

2016-08-18 16:41:33 blex

Vielleicht so etwas wie dieses

jsFiddle

// add event listener for this group of radio inputs 
 
$('input[name="itemOption"]').on('change', function(){ 
 
    // depending on the "checked" value of #moveAllItems, using a ternary operator set 
 
    // the css "display" to "inline-block" if it's checked, or "none" if unchecked 
 
    var show = ($('#moveAllItems').is(':checked')) ? 'inline-block' : 'none'; 
 
    $('#inputCategory').css({display: show}); 
 
})

#inputCategory{ display:none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input type="radio" name="itemOption" id="deleteAllItems" value="deleteAllItems" checked>Delete items 
 
<input type="radio" name="itemOption" id="moveAllItems" value="moveAllItems">Move items 
 

 
<select id="inputCategory" name="category" data-dependent='{"itemOption": "moveAllItems"}'> 
 
    <option>Choose a category to move the items to...</option> 
 
    <option>Category A</option> 
 
    <option>Category B</option> 
 
</select>

Quelle

2016-08-18 16:41:51

Erstens können Sie das select Element machen versteckt werden mit CSS wie folgt:

#inputCategory { 
    display: none; 
}

Dann können Sie einen on click Zuhörer auf den Radio-Buttons registrieren, dass Sie die select-Element machen angezeigt werden soll (in diesem Fall werden alle Radio-Buttons):

$('input[type="radio"]').click(function(){ 
    $('#inputCategory').show(); // Show element 
});

Siehe working JSFiddle

Quelle

2016-08-18 16:42:37

Wählen Sie abhängig von Radio Button

Antwort

Verwandte Themen