简体   繁体   English

如何使单击单选按钮选中和取消选中

[英]How to make click radio button check and uncheck

Let me explain what i want to achieve. 让我解释一下我想要实现的目标。 Click on label 1 will show the button one click again i want button disable same with lable 2 and lable 3. 单击标签1将再次显示按钮一次,我希望按钮禁用与标签2和标签3相同的按钮。

JsFiddle - http://jsfiddle.net/yingchor/xjzutbr9/2/ JsFiddle- http://jsfiddle.net/yingchor/xjzutbr9/2/

<input type='radio' class='radio-button' name='one'>
<label>label 1</label>
<input type='radio' class='radio-button' name='two'>
<label>label 2</label>
<input type='radio' class='radio-button' name='three'>
<label>label 3</label>

<div class="show-one one box" style="display: none;">
  <button>Button 1</button>
</div>
<div class="show-two two box" style="display: none;">
  <button>Button 2</button>
</div>
<div class="show-three three box" style="display: none;">
  <button>Button 3</button>
</div>


var radio_button = false;

$('input[type="radio"]').click(function() {
  var inputValue = $(this).attr("name");
  var targetBox = $("." + inputValue);
  $(".box").not(targetBox).hide();
  $(targetBox).fadeIn();
  //alert('asd')
});
$('.radio-button').on("click", function(event) {
  var this_input = $(this);
  if (this_input.attr('checked1') == '1') {
    this_input.attr('checked1', '1')
  } else {
    this_input.attr('checked1', '2')
  }

  $('.radio-button').prop('checked', false);
  if (this_input.attr('checked1') == '1') {
    this_input.prop('checked', false);
    this_input.attr('checked1', '2');
  } else {
    this_input.prop('checked', true);
    this_input.attr('checked1', '1')
  }
});

How should I change my script to achieve that? 我应该如何更改脚本以实现该目标?

If I understood you try this: 如果我了解您的尝试,请执行以下操作:

$('.radio-button').on("click", function(event) {
    var this_input = $(this);
    if (this_input.attr('checked1') == '1') {
        this_input.attr('checked1', '1')
    } else {
        this_input.attr('checked1', '2')
    }

    $('.radio-button').prop('checked', false);
    if (this_input.attr('checked1') == '1') {
        this_input.prop('checked', false);
        this_input.attr('checked1', '2');
        $('.box').hide(); // Hides button in second click
    } else {
        this_input.prop('checked', true);
        this_input.attr('checked1', '1')
    }

});

Here example: http://jsfiddle.net/xjzutbr9/3/ 例如: http : //jsfiddle.net/xjzutbr9/3/

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM