隐藏和显示带有复选框的单选按钮答案

【问题标题】：Hide and Show radio buttons with checkbox隐藏和显示带有复选框的单选按钮
【发布时间】：2015-10-19 15:34:24
【问题描述】：

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

默认情况下需要选中第一个单选按钮，即使选中复选框后隐藏。
如果复选框已被选中，则显示所有单选按钮，如果需要，用户可以选择另一个单选按钮。
但是，如果未选中该复选框，请将单选按钮设置回默认选中的第一个并隐藏所有单选按钮。

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

我的 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>

非常感谢！

【问题讨论】：

请显示您尝试过的 Javascript。
这个问题看起来很像这个？ stackoverflow.com/questions/33215234/…接受的解决方案有什么问题？
@AtheistP3ace 已经改变了计划，即使未选中复选框，我也需要保持第一个单选按钮处于选中状态，但我不知道如何修改您的代码来执行此操作。可以修改吗？
当然，所以澄清一下。当您选中复选框时，是否仍会选中第一个收音机？
是的！如果我在选中复选框后更改为其他收音机，当取消选中复选框时，收音机会返回到第一个，因为是默认值。

标签： javascript jquery html checkbox

【解决方案1】：

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

HTML：

<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>

JS：

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;
    }
}

CSS：

.buttons {
    display: none;
}

小提琴：http://jsfiddle.net/dgqn5fc4/1/

【讨论】：

这对我来说效果更好，很完美，我只需要隐藏 div“按钮”并显示复选框是否被选中
我会更新，所以如果未选中复选框，隐藏按钮 div，选中复选框时显示？
@EderAugusto 更新了答案并根据复选框隐藏和显示 div。
就是这样。完美的。谢谢。
就是这样！非常感谢，您保存了我的项目。

【解决方案2】：

这里有一些问题。首先，您需要确保关闭输入标签：

<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>

然后，您可以通过将 checked="checked" 添加到适当的单选元素来检查 html 中的默认单选按钮。

<div class="buttons">
    <input type="radio" checked="checked" 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>

您可以在 CSS 中默认隐藏单选按钮：

.buttons {
    display: none; 
}

然后，您可以使用 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"); 
        }
    }); 
});

编辑：

这是一个小提琴：http://jsfiddle.net/8q94Lvbo/

【讨论】：

【解决方案3】：

执行以下操作。

$('[name="featured_ad"]').on('change', function(){
  var $first = $('[name="ad_pack_id"]').first();
  var $rest = $('[name="ad_pack_id"]').slice(1);
  if( $(this).is(':checked') ){
    $first.prop('checked',true);
    $first
      .closest('span')
      .hide();
    $rest.prop({
      'checked':false,
      'disabled':false
    });
    
  } else {
    $first
      .closest('span')
      .show();
    $first.prop('checked',true);
    $rest.prop({
      'checked':false,
      'disabled':true
    });
  }
}).change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input name="featured_ad" value="1" type="checkbox">condition
<div class="buttons">
    <span><input type="radio" name="ad_pack_id" value="497649">value 1</span><br/>
    <span><input type="radio" name="ad_pack_id" value="497648">value 2</span><br/>
    <span><input type="radio" name="ad_pack_id" value="497647">value 3</span><br/>
</div>

【讨论】：

【解决方案4】：

您必须在 onclick="Show_Div('Div_1')" 之类的引号中将参数传递给 javaScript，而不是像 onclick="Show_Div(Div_1)"。。 p>

对于其他要求，您可以查看以下 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>

您可以应用以下简单的 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;
    }

【讨论】：