使用复选框条件激活单选按钮

Activate radio buttons using checkbox conditions

本文关键字：激活 单选按钮 条件 复选框      更新时间：2023-09-26

基本上，我想按照下面给出的条件使用复选框激活单选按钮-

  1. 如果我选中复选框，第一个无线电将被选中。如果我更改为另一个单选按钮，复选框仍然被选中。

  2. 如果我取消选中复选框，我想取消选中任何单选按钮。我的意思是，如果复选框被选中，单选按钮需要被选中，如果复选框未被选中，单选按钮也需要被选中。

我已经尝试了一堆部分解决方案，但没有一个是正确的。(

我的HTML: 

<input name="featured_ad" value="1" type="checkbox">condition
<br><br>
<input type="radio" name="ad_pack_id" value="497649">value 1<br>
<input type="radio" name="ad_pack_id" value="497648">value 2<br>
<input type="radio" name="ad_pack_id" value="497647">value 3<br>

非常感谢!

您可以使用removeProp()取消选中单选按钮，prop()选择复选框。

$(function(){
  $('input[name=featured_ad]').change(function(){
     if(!$(this).is(":checked"))
       $("input[name=ad_pack_id]").removeProp("checked");
     else
        $("input[name=ad_pack_id]:first").prop("checked",true);
  });
  $('input[name=ad_pack_id]').click(function(){
      $('input[name=featured_ad]').prop("checked",true); 
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input name="featured_ad" value="1" type="checkbox">condition
<br><br>
<input type="radio" name="ad_pack_id" value="497649">value 1<br>
<input type="radio" name="ad_pack_id" value="497648">value 2<br>
<input type="radio" name="ad_pack_id" value="497647">value 3<br>

下面是一个使用纯javascript的示例。

小提琴:http://jsfiddle.net/3bugg14y/1/

HTML: 

<input name="featured_ad" value="1" type="checkbox" onclick="resetradio(this)">condition
<br><br>
<input type="radio" name="ad_pack_id" value="497649" onclick="setcheckbox()">value 1<br>
<input type="radio" name="ad_pack_id" value="497648" onclick="setcheckbox()">value 2<br>
<input type="radio" name="ad_pack_id" value="497647" onclick="setcheckbox()">value 3<br>

JS: 

function resetradio (checkbox) {
    var radios = document.getElementsByName('ad_pack_id');
    var index = 0, length = radios.length;
    if (checkbox.checked == false) {
        for ( ; index < length; index++) {
            radios[index].checked = false;
        }
    }
    else {
        radios[index].checked = true;
    }
}
function setcheckbox () {
    var checkbox = document.getElementsByName('featured_ad')[0];
    if (checkbox.checked == false) {
        checkbox.checked = true;
    }
}

如果我理解正确的话，您可以这样做:

$(':checkbox').on("click", function(event) {
  if (this.checked)
    $(':radio:first').prop('checked', this.checked);
  else
    $(':radio').prop('checked', this.checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="featured_ad" value="1">condition
<br>
<br>
<input type="radio" name="ad_pack_id" value="497649">value 1
<br>
<input type="radio" name="ad_pack_id" value="497648">value 2
<br>
<input type="radio" name="ad_pack_id" value="497647">value 3
<br>

检查下面的代码段

function set(event){
    if(event.checked=== false && event.type === "checkbox"){
       var ele = document.querySelectorAll("input[type='radio']");
       for(var i = 0; i<ele.length; i++)
       {
          ele[i].checked = false;
       }
     }
    else if(event.checked=== true && event.type === "checkbox"){
        var ele = document.querySelector("input[type='radio']");
        if(ele){
            ele.checked = true;
        }
    }
   else if (event.type !== "checkbox")
   {
     var ele = document.querySelector("input[type='checkbox']");
     if(ele){
        ele.checked = true;
     }
    }
}

html:

<input name="featured_ad" value="1" type="checkbox" onClick="set(this)">condition
<br><br>
<input type="radio" class="a" name="ad_pack_id" value="497649" onClick="set(this)">value 1<br>
<input type="radio" class="a" name="ad_pack_id" value="497648" onClick="set(this)">value 2<br>
<input type="radio" class="a" name="ad_pack_id" value="497647" onClick="set(this)">value 3<br>

添加了一个属性来隐藏/显示基于复选框条件的单选按钮

小提琴:http://jsfiddle.net/3bugg14y/3/

HTML: 

<input name="featured_ad" value="1" type="checkbox" onclick="resetradio(this)">condition
<br><br>
<div id="buttons" style="display:none">
<input type="radio" name="ad_pack_id" value="497649">value 1<br>
<input type="radio" name="ad_pack_id" value="497648">value 2<br>
<input type="radio" name="ad_pack_id" value="497647">value 3<br>
</div>

JS: 

function resetradio (checkbox)
{
    var radios = document.getElementsByName('ad_pack_id');
    var index = 0, length = radios.length;
    if (checkbox.checked == false)
    {
        document.getElementById('buttons').style.display='none';
        for ( ; index < length; index++)
        {
            radios[index].checked = false;
        }
    }
    else
    {
        document.getElementById('buttons').style.display='block';
        radios[index].checked = true;
    }
}

应该可以。在取消选中复选框后，还可以跟踪最后选定的单选按钮。

var check = document.querySelector('input[type="checkbox"]'),
    radioBtns = Array.prototype.slice.call(document.querySelectorAll('input[type="radio"]')),
    isRadioChecked = false,
    lastCheckedRadio = 0;
check.addEventListener('change', function(e) {
  if (!e.target.checked) {
    radioBtns.forEach(function(elem) {
      elem.checked = false;
    });
    isRadioChecked = false;
  } else {
    if (!isRadioChecked) {
      radioBtns[lastCheckedRadio].checked = true;
    }
  }
}, false);
radioBtns.forEach(function(elem, index) {
  elem.addEventListener('change', function(e) {
    if (e.target.checked) {
      isRadioChecked = true;
      lastCheckedRadio = index;
    } else {
      isRadioChecked = false;
    }
    if (e.target.checked && !check.checked) {
      check.checked = true;
    }
  }, false);
});
<input name="featured_ad" value="1" type="checkbox">condition
<br><br>
<input type="radio" name="ad_pack_id" value="497649">value 1<br>
<input type="radio" name="ad_pack_id" value="497648">value 2<br>
<input type="radio" name="ad_pack_id" value="497647">value 3<br>

相关文章：