如何使用jQuery在页面加载中找到选定的单选按钮?

时间:2018-07-30 06:46:57

标签: javascript php jquery html wordpress

我正在使用wordpress,并且每个<li>中都有一个带有单选按钮的列表

<ul class="woof_childs_list">

    <li>
        <input type="radio" id="woof_514" class="woof_radio_term woof_radio_term_514" data-term-id="514" name="product_cat" value="514">
    </li>

    <li>
        <input type="radio" id="woof_515" class="woof_radio_term woof_radio_term_515" data-term-id="515" name="product_cat" value="515">
    </li>

    <li>
        <input type="radio" id="woof_516" class="woof_radio_term woof_radio_term_516" data-term-id="516" name="product_cat" value="516">
    </li>

    <li>
        <input type="radio" id="woof_517" class="woof_radio_term woof_radio_term_517" data-term-id="517" name="product_cat" value="517">
    </li>

</ul>

在某些情况下,页面加载时会选择其中一个按钮。

我想根据自己的喜好查找并取消选择或取消选中页面加载时选中的单选按钮。

我当前的代码如下:

  var j = jQuery.noConflict();
  if(j('.woof_childs_list > li > .woof_radio_term').is(':checked')) {
     j(this).prop('checked', false);
  }

上面的代码存在的问题是,我无法在页面加载时捕获所选的单选按钮。

任何想法都值得赞赏。

3 个答案:

答案 0 :(得分:2)

尝试一下。

$(document).ready(function(){
            $('.woof_childs_list input[type=radio]').prop('checked', false);
        });

答案 1 :(得分:1)

使用prop方法。在此演示中,默认情况下已检查输入之一,并且此

$("input[name='product_cat']").prop('checked',false)

将取消选中它。还记得将代码放入document.ready或在加载dom后加载脚本

$("input[name='product_cat']").prop('checked', false)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="woof_childs_list">

  <li>
    <input type="radio" id="woof_514" class="woof_radio_term woof_radio_term_514" data-term-id="514" name="product_cat" value="514">
  </li>

  <li>
    <input type="radio" id="woof_515" class="woof_radio_term woof_radio_term_515" data-term-id="515" name="product_cat" value="515" checked>
  </li>

  <li>
    <input type="radio" id="woof_516" class="woof_radio_term woof_radio_term_516" data-term-id="516" name="product_cat" value="516">
  </li>

  <li>
    <input type="radio" id="woof_517" class="woof_radio_term woof_radio_term_517" data-term-id="517" name="product_cat" value="517">
  </li>

</ul>

答案 2 :(得分:1)

只需从以下位置更改代码即可

var j = jQuery.noConflict();
if(j('.woof_childs_list > li > .woof_radio_term').is(':checked')) {
   j(this).prop('checked', false);
}

收件人:

var j = jQuery.noConflict();
j('.woof_childs_list > li > .woof_radio_term:checked').prop('checked', false);

您已全部选中.woof_radio_term:checked