ラジオボタンに依存するを選択

特定の<INPUT type="radio">が選択されている場合、<SELECT>を表示させるにはどうすればよいですか？ラジオボタンに依存するを選択

私は<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>

私のHTMLは次のとおりです。

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

出典

2016-08-18 Simon Otter

あなたは単に$('[name="'+target+'"]')で$(target)を交換する必要があります。

$('[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>

出典

2016-08-18 16:41:33 blex

多分これ

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>

出典

2016-08-18 16:41:51

まずのようなものは、あなたがselect要素を作ることができることは、次のようにCSSを使用して非表示にする：

#inputCategory { 
    display: none; 
}

その後、あなたは（この場合はすべてのラジオボタン）表示されるようにselect要素を作りたいラジオボタンのon clickリスナを登録することができます

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

はworking JSFiddle

を参照してください。

出典

2016-08-18 16:42:37

ラジオボタンに依存するを選択

答えて

関連する問題