输入单选按钮功能不适用于jQuery 1.10.1

时间:2014-04-02 07:40:45

标签: javascript jquery input radio

为什么这段代码不适用于jQuery 1.10.1?
在这里小提琴 - > http://jsfiddle.net/XgDwU/9/

<input type="radio" id="don" name="billing[use_for_shipping]" value="">Ship to this address</input>
<input type="radio" id="don1" name="billing[use_for_shipping]" value="">Ship to different address</input>
<br/><br/>
<b> <input type="checkbox" id="chkSelect" /> Check/Uncheck me </b>
<br/><br/>
<p></p> 

这是我的功能

$(document).ready(function() {
  $('#chkSelect').click(function(){

    var isChecked = $('#chkSelect').is(':checked');
      if(isChecked){
          $("input#don").attr('checked',true);
          $('p').html('Checkbox is checked: <b>True</b>');
      }else{
          $("input#don1").attr('checked',true);
          $('p').html('Checkbox is checked: <b>False</b>');
      }
  });
});

2 个答案:

答案 0 :(得分:1)

问题:

  1. 使用change事件代替click
  2. 使用prop代替attr
  3. 我使用this.checked代替$('#chkSelect').is(':checked')
  4. 尝试

    $(document).ready(function() {
        $('#chkSelect').change(function(){
          if(this.checked){
              $("input#don").prop('checked',true);
              $('p').html('Checkbox is checked: <b>True</b>');
          }else{
              $("input#don1").prop('checked',true);
              $('p').html('Checkbox is checked: <b>False</b>');
          }
        });
    });
    

    DEMO

    您应该阅读.prop() vs .attr()提供的非常好的解释

答案 1 :(得分:0)

您正尝试将检查属性添加到单选按钮。如果集合中的多个单选按钮具有checked属性,则将检查后者。发生了什么,正在检查多个无线电。

由于它是一个单选按钮,并且浏览器处理切换,只需触发点击您想要的那个:

$('#chkSelect').click(function () {
    if (this.checked) {
        $("input#don").click();
        $('p').html('Checkbox is checked: <b>True</b>');
    } else {
        $("input#don1").click();
        $('p').html('Checkbox is checked: <b>False</b>');
    }
});

JSFiddle