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

Question

Basically i'd like hide and show the radio buttons if the checkbox is checked or not, but with some conditions.

1. The first radio button needs to be checked by default even if hidden once the checkbox has been checked.

2. If the checkbox has been checked then show all the radio buttons and the user can choose another radio button if necessary.

3. But, if the checkbox is unchecked, set the radio button back to the first checked by default and hide all the radio buttons.

I tried to modify some solutions that i found, but without success :(

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

Thanks a lot!

Answer 1

You've got a few issues here. First of all, you need to make sure you close your input tags:

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

You can then check your default radio button right in the html by adding checked="checked" to the appropriate radio element.

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

You can hide your radio buttons by default in your CSS:

.buttons {
    display: none; 
}

Then, you can show them using jQuery, and do your selections based on your condition:

$(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"); 
        }
    }); 
}); 

Edit:

Here is a fiddle: http://jsfiddle.net/8q94Lvbo/

Answer 2

As we discussed does this work for you?

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

Fiddle: http://jsfiddle.net/dgqn5fc4/1/

Answer 3

Do the following.

 $('[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

You have to pass arguments to javaScript in quotes like onclick="Show_Div('Div_1')" not like onclick="Show_Div(Div_1)" .

And for others requirement you can check the following 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>

You can apply following simple JS and jQuery to achive your goal

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