隐藏和显示单选按钮与复选框

Question

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

1. 第一个单选按钮需要默认选中，即使在复选框被选中后隐藏。

2. 如果复选框已被选中，则显示所有单选按钮，如果需要，用户可以选择另一个单选按钮。

3. 但是，如果取消选中复选框，则将单选按钮设置为默认选中的第一个，并隐藏所有单选按钮。

我试着修改了一些解决方案，我发现，但没有成功:(

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

非常感谢

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

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

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

Answer 4

你必须传递参数给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> 

您可以将下面这个简单的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; 
    }