jQuery : 如何select 选中radio？

Question

我在这里想要实现的是在另一台收音机被 selected 时取消隐藏单选按钮。但出于某种原因，我无法成功地 select 选中带有 jQuery select 的单选按钮。我试图找到一个解决方案 基于选中的无线电输入 selector 而不是基于无线电值 selector. 所以使用 $(stuff) .val 不会这样做。由于 select 或 $(".radio-838 .first input[type=radio]").is(":checked") 无效，以下代码无法正常工作：

  if ($(".radio-838 .first input[type=radio]").is(":checked")){
   $(".radio-839 .first").show();
  }
  else{
   $(".radio-839 .first").hide();
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="formel" id="formtde">
  <h3>Name</h3>
  <p>
  <span class="radio-838">
  <span class="first">
   <label>
    <input type="radio" name="radio-838" value="JOHN">
    <span>JOHN</span>
   </label>
  </span>
  <span class="last">
   <label>
    <input type="radio" name="radio-838" value="BOBBY">
    <span>BOBBY</span>
   </label>
  </span>
 </span>
 </p>
</div>

<div class="formel" id="formgec">
 <h3>Car</h3>
 <p>
 <span class="radio-839">
   <span class="first">
    <label>
     <input type="radio" name="radio-839" value="FORD">
     <span>FORD</span>
    </label>
   </span>
    <label>
     <input type="radio" name="radio-839" value="CHEVROLET">
     <span>CHEVROLET</span>
    </label>
    <label>
     <input type="radio" name="radio-839" value="PORSCHE">
     <span>PORSCHE</span>
    </label>
    <label>
     <input type="radio" name="radio-839" value="NISSAN">
     <span>NISSAN</span>
    </label>
 </span>
 </p>
</div>

我也试过了 $(".radio-838 .first input:radio]").is(":checked")

Answer 1

应该这样做：

var checkInput = function(e){
  var target = e.target || $('.radio-838');
  $(".radio-839 .first")[
     $(target).closest('.radio-838').find('.first input').is(':checked') ?
     'show':'hide'
  ]();
};

$('.radio-838').on('change', 'input[type=radio]', checkInput);
$(window).on('load', checkInput);

var checkInput = function(e){
  var target = e.target || $('.radio-838');
  $(".radio-839 .first")[$(target).closest('.radio-838').find('.first input').is(':checked') ? 'show':'hide']();
};

$('.radio-838').on('change', 'input[type=radio]', checkInput);
$(window).on('load', checkInput);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="formel" id="formtde">
  <h3>Name</h3>
  <p>
  <span class="radio-838">
  <span class="first">
   <label>
    <input type="radio" name="radio-838" value="JOHN">
    <span>JOHN</span>
   </label>
  </span>
  <span class="last">
   <label>
    <input type="radio" name="radio-838" value="BOBBY">
    <span>BOBBY</span>
   </label>
  </span>
 </span>
 </p>
</div>

<div class="formel" id="formgec">
 <h3>Car</h3>
 <p>
 <span class="radio-839">
   <span class="first">
    <label>
     <input type="radio" name="radio-839" value="FORD">
     <span>FORD</span>
    </label>
   </span>
    <label>
     <input type="radio" name="radio-839" value="CHEVROLET">
     <span>CHEVROLET</span>
    </label>
    <label>
     <input type="radio" name="radio-839" value="PORSCHE">
     <span>PORSCHE</span>
    </label>
    <label>
     <input type="radio" name="radio-839" value="NISSAN">
     <span>NISSAN</span>
    </label>
 </span>
 </p>
</div>

您的主要问题是您的代码仅在加载时执行，而不是在您更改输入时执行。所以这就是我所做的：

创建了一个函数，该函数将 show/hide 基于检查的输入。
在 window load 事件和 .radio-838 input change 事件上触发函数。

jQuery : 如何select 选中radio？

jQuery : how to select a checked radio?

jquery

jquery-selectors

radio-button