Question

我遇到单选按钮检查和取消选中的问题。我们有4个单选按钮，其中2个被命名为艺术家，2个客户。

每当我点击1个艺术家按钮时，我也想将另一个显示为选中，反之亦然。我的代码是：

第一次DIV：

<div class="col-md-4 col-sm-6 col-xs-12">
    <input id="radio1" type="radio" class ="chooseprofile rad1" name="data[User][role1]" value="artist" checked="checked"><label for="radio1">Artist</label>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
    <input id="radio2" type="radio" class ="chooseprofile rad2" name="data[User][role1]" value="user"><label for="radio2">Customer</label>
</div>

第二次DIV：

<div class="col-md-4 col-sm-6 col-xs-12">
    <input id="radio11" type="radio" class ="chooseprofile rad1" name="data[User][role2]" value="artist" checked="checked"><label for="radio11">Artist</label>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
    <input id="radio21" type="radio" class ="chooseprofile rad2" name="data[User][role2]" value="user"><label for="radio21">Customer</label>
</div>

~~提前致谢请帮助::~~

$(document).on('change','.chooseprofile',function(){
  var userType = $(this).val();
    if(userType == 'artist') {  
        $(document.body).find('.rad1').prop('checked', 'checked');
        $(document.body).find('.rad2').removeAttr('checked');
    }else{
            $(document.body).find('.rad2').prop('checked', 'checked');
            $(document.body).find('.rad1').removeAttr('checked');
    }

});

Answer 1

你去了：

jQuery(function() {
  jQuery('input.chooseprofile').click(function() {
    if (jQuery(this).hasClass('rad1')) {
      jQuery('input.chooseprofile.rad1').prop('checked', true);
      jQuery('input.chooseprofile.rad2').prop('checked', false);
    }
    else {
      jQuery('input.chooseprofile.rad1').prop('checked', false);
      jQuery('input.chooseprofile.rad2').prop('checked', true);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
First DIV:
<div class="col-md-4 col-sm-6 col-xs-12">
    <input id="radio1" type="radio" class ="chooseprofile rad1" name="data[User][role1]" value="artist" checked="checked"><label for="radio1">Artist</label>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
    <input id="radio2" type="radio" class ="chooseprofile rad2" name="data[User][role1]" value="user"><label for="radio2">Customer</label>
</div>

Second DIV:

<div class="col-md-4 col-sm-6 col-xs-12">
    <input id="radio11" type="radio" class ="chooseprofile rad1" name="data[User][role2]" value="artist" checked="checked"><label for="radio11">Artist</label>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
    <input id="radio21" type="radio" class ="chooseprofile rad2" name="data[User][role2]" value="user"><label for="radio21">Customer</label>
</div>

单击一下Jquery检查2单选按钮

1 个答案: