Javascript 使用复选框隐藏和显示单选按钮

基本上我想隐藏和显示单选按钮，如果复选框被选中或没有，但有一些条件

默认情况下，第一个单选按钮需要选中，即使选中复选框后隐藏

如果复选框已选中，则显示所有单选按钮，用户可以根据需要选择其他单选按钮

但是，如果复选框未选中，则将单选按钮设置回默认选中的第一个，并隐藏所有单选按钮

我试图修改我找到的一些解决方案，但没有成功：(

我的HTML：

<input name="featured_ad" value="1" type="checkbox">condition</input>
<div class="buttons">
    <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>

条件
值1

值2

值3

---

非常感谢！

您遇到了一些问题。首先，您需要确保关闭输入标签：

<input name="featured_ad" value="1" type="checkbox">condition</input>

<div class="buttons">
    <input type="radio" name="ad_pack_id" value="497649">value 1</input>
    <input type="radio" name="ad_pack_id" value="497648">value 2</input>
    <input type="radio" name="ad_pack_id" value="497647">value 3</input>
</div>

然后，您可以使用jQuery显示它们，并根据您的条件进行选择：

$(document).ready(function(){
    $("input[name='featured_ad']").on("change", function(){
        var isChecked = $(this).prop("checked"); 
        if(isChecked){
            $(".buttons").show(); 
        } else {
            $(".buttons").hide(); 
            $("input[name='ad_pack_id'][value='497649']").prop("checked", "checked"); 
        }
    }); 
}); 

编辑：

---

这里有一把小提琴：

正如我们所讨论的，这对你有用吗

HTML:

CSS:

小提琴：

做下列动作

$（'[name=“featured_ad”]'）。在（'change'，function（）上{
var$first=$（'[name=“ad_pack_id”]'）。first（）；
var$rest=$（'[name=“ad_pack_id”]'）。切片（1）；
如果（$（this）.is（':checked'））{
$first.prop（'checked'，true）；
美元优先
.closest（'span'））
.hide（）；
$rest.prop({
“checked”：false，
“已禁用”：false
});
}否则{
美元优先
.closest（'span'））
.show（）；
$first.prop（'checked'，true）；
$rest.prop({
“checked”：false，
“已禁用”：true
});
}
}).change（）；

条件
值1

值2

值3

您必须用引号将参数传递给javaScript，如onclick=“Show_Div（'Div_1'）”而不是onclick=“Show_Div（Div_1）”

对于其他要求，您可以检查以下html

<input type="checkbox" id="check" onclick="checkFun();"/>Your CheckBox<br/>
<img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/flower-icon.png" alt="" onclick="Show_Div('Div_1')" width="100px">
    <p>
      <input id="radio1" type="radio" onclick="Show_Div('Div_1')" class="cb1" onchange="cbChange1(this)" checked="checked"/>Flower 1</p>
    <div id="Div_1" style="display: none;">
      Flower is pink.
    </div>
    <br/>
    <br/>

    <img src="http://www.clker.com/cliparts/0/d/w/v/V/p/pink-flower-md.png" alt="" onclick="Show_Div('Div_2')" width="100px">
    <p>
      <input type="radio" id="radio2" onclick="Show_Div('Div_2')" class="cb1" onchange="cbChange1(this)" disabled >Flower 2</p>
    <div id="Div_2" style="display: none;">
      Flower is orange.
</div>

您的复选框


花1

花是粉红色的。





花2

花是橙色的。

您可以应用以下简单的JS和jQuery来实现您的目标

function checkFun(){
  console.log("click");
  var ch=$("#check");
  if(ch.is(':checked')){
    $("#radio2").attr("disabled",false);
  }else{
   $("#radio1").prop("checked", true);
    $("#radio2").prop("checked", false);
    $("#radio2").attr("disabled",true);
  }
}
function Show_Div(Div_id) {
  if(Div_id=="Div_1"){

    $("#Div_1").show();
    $("#Div_2").hide();
  }else{
    $("#Div_2").show();
    $("#Div_1").hide();
  }
}
    function cbChange1(obj) {
        var cb1 = document.getElementsByClassName("cb1");
        for (var i = 0; i < cb1.length; i++) {
            cb1[i].checked = false;
        }
        obj.checked = true;
    }

函数checkFun（）{
控制台日志（“单击”）；
var ch=$（“#检查”）；
如果（ch.is（'：checked'））{
$（“#radio2”）.attr（“禁用”，错误）；
}否则{
$（“#radio1”）.prop（“选中”，为真）；
$（“#radio2”）.prop（“选中”，假）；
$（“#radio2”）.attr（“禁用”，真）；
}
}
功能显示分区（分区id）{
如果（Div_id==“Div_1”）{
$（“#Div_1”）.show（）；
$（“#Div_2”）.hide（）；
}否则{
$（“#Div_2”）.show（）；
$（“#Div_1”）.hide（）；
}
}
功能cbChange1（obj）{
var cb1=document.getElementsByClassName（“cb1”）；
对于（变量i=0；i

请显示您尝试过的Javascript。这个问题与此非常相似？接受的解决方案有什么问题？@AtheistP3ace已更改计划，我需要保持第一个单选按钮处于选中状态，即使复选框未选中，但我不知道如何修改您的代码来完成此操作。您可以修改吗？当然，请澄清。当您选中复选框时，第一个收音机是否仍然被选中？是的！如果我在选中复选框后更改为其他收音机，当取消选中复选框时，收音机将返回到第一个收音机，因为这是默认设置。这对我更有效，它很完美，我只需要隐藏div“按钮”显示复选框是否选中我会更新，所以如果复选框未选中，则隐藏按钮div，当复选框选中时显示它？@EderAugusto更新了答案并根据复选框小提琴隐藏和显示div。就是这样。完美。谢谢。就是这样！非常感谢，您保存了我的项目。

<input name="featured_ad" value="1" type="checkbox" onclick="resetradio(this)">condition
<div class="buttons">
    <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>
</div>

function resetradio (checkbox) {
    var buttons = document.querySelector('.buttons');
    var radios = document.getElementsByName('ad_pack_id');
    radios[0].checked = true;
    if (checkbox.checked == true) {
        buttons.style.display = 'block';
    }
    else {
        buttons.style.display = 'none';
    }
}

function setcheckbox () {
    var checkbox = document.getElementsByName('featured_ad')[0];
    if (checkbox.checked == false) {
        checkbox.checked = true;
    }
}

.buttons {
    display: none;
}

<input type="checkbox" id="check" onclick="checkFun();"/>Your CheckBox<br/>
<img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/flower-icon.png" alt="" onclick="Show_Div('Div_1')" width="100px">
    <p>
      <input id="radio1" type="radio" onclick="Show_Div('Div_1')" class="cb1" onchange="cbChange1(this)" checked="checked"/>Flower 1</p>
    <div id="Div_1" style="display: none;">
      Flower is pink.
    </div>
    <br/>
    <br/>

    <img src="http://www.clker.com/cliparts/0/d/w/v/V/p/pink-flower-md.png" alt="" onclick="Show_Div('Div_2')" width="100px">
    <p>
      <input type="radio" id="radio2" onclick="Show_Div('Div_2')" class="cb1" onchange="cbChange1(this)" disabled >Flower 2</p>
    <div id="Div_2" style="display: none;">
      Flower is orange.
</div>

function checkFun(){
  console.log("click");
  var ch=$("#check");
  if(ch.is(':checked')){
    $("#radio2").attr("disabled",false);
  }else{
   $("#radio1").prop("checked", true);
    $("#radio2").prop("checked", false);
    $("#radio2").attr("disabled",true);
  }
}
function Show_Div(Div_id) {
  if(Div_id=="Div_1"){

    $("#Div_1").show();
    $("#Div_2").hide();
  }else{
    $("#Div_2").show();
    $("#Div_1").hide();
  }
}
    function cbChange1(obj) {
        var cb1 = document.getElementsByClassName("cb1");
        for (var i = 0; i < cb1.length; i++) {
            cb1[i].checked = false;
        }
        obj.checked = true;
    }