Radio Buttons checkboxes

Question

i have 4 radio checkboxes i need when i click on the first 3 checkboxes the div with style display none become a block and when i click on the last radio checkbox it become display none

<div class="col-lg-12 col-sm-12 col-xs-12 col-md-12 col-xl-12  ">
    <br>
    <div class="col-sm-3 d">
        <label for="">{{__('main.work_condition')}} : <span class="required-red">*</span> </label>
    </div>
    <div class="col-sm-6 d">
        <label class="">&ensp;<input type="radio" id=""  style="margin-right:5px" name="work_condition" value="1" @if($member->work_condition == 1)
            checked
        @endif   />{{__('main.employee')}}</label>
        <label class="">&ensp;<input type="radio"  id="" style="margin-right:5px" name="work_condition" value="2" @if($member->work_condition == 2)
            checked
        @endif   />{{__('main.retired')}}</label>


        <label class="">&ensp;<input type="radio" id=""  style="margin-right:5px" name="work_condition" value="3" @if($member->work_condition == 3)
            checked
        @endif   />{{__('main.freelance')}}</label>

        <label class="">&ensp;<input type="radio" id="myCheck" style="margin-right:5px" name="work_condition" value="4" @if($member->work_condition == 4)
            checked
        @endif   />{{__('main.not_working')}}</label>

    </div>

</div>

here's the div with style display:none;

   <div class="col-lg-12 col-sm-12 col-xs-12 col-md-12 col-xl-6" id="text" style="display: none;margin-top: 20px;">
                <div class="col-sm-3 d">
                    <label for="">{{__('main.position_name')}} : <span class="required-red">*</span></label>

                </div>                    


                 <div class="col-sm-4 d">
                    <input name="position_name" value="{{$member->position_name}}"  type="text" class="form-control" />

                </div>                    


                 <div class="col-sm-1 d">
                    <label for="">{{__('main.place')}} : <span class="required-red">*</span></label>

                </div>                    



                 <div class="col-sm-3 d">
                    <input name="its_affiliate" value="{{$member->its_affiliate}}"  type="text" class="form-control" />

                </div>                    




    </div>

the problem is that i can't give the 3 checkboxes the same id because it will only work on the first checkbox only so i tried this in js

$(document).ready(function () {

    $("input[name=work_condition]").each(function(index) {
        $(this).on("click", function(){
        console.log()
            text.style.display = "block";

        });
    });


});

this makes the div block and i gave the last radio button id and got it

      var checkBox1 = document.getElementById("myCheck");

document.getElementById('myCheck').onclick = function() {
//     // access properties using this keyword
//     console.log('a');

    if (this.checked) {
        // console.log('a');
          var text = document.getElementById("text");
 if (checkBox1.checked == true){                           
    text.style.display = "none";
  }
}

};

but it still doesn't work :') can anyone help me how can i make it display none if only the last radio button clicked and block in the other 3

Answer 1

Just use class instead, ie:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
    $(function () {
        $(".blockRadio").on("click", function(){
            $('#text').css('display','block');
        });
        $(".noneRadio").on("click", function(){
            $('#text').css('display','none');
        });
    });
</script>
<input type="radio" name="group" class="blockRadio" /> 
<input type="radio" name="group" class="blockRadio" />
<input type="radio" name="group" class="blockRadio" />
<input type="radio" name="group" class="noneRadio" />
<input type="text" id="text" style="display:none;"/>

Answer 2

Here's a simple example using jQuery.

$(function () {
  // create an event handler for your radio buttons
  $('[name=work_condition]').change(function () {
    // show/hide div depending on value
    $('#div').toggle(this.value != 4); 
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="work_condition" value="1" />1<br>
<input type="radio" name="work_condition" value="2" />2<br>
<input type="radio" name="work_condition" value="3" />3<br>
<input type="radio" name="work_condition" value="4" />4

<div id="div" style="display:none">1, 2 or 3 were selected</div>

• .change creates an event handler for your radio buttons

• .toggle(condition) shows or hides the jQuery object based off condition

Answer 3

Try this,

function fun(e){
  if(e == 4) {
    document.getElementById("a").style.display = "none";
  } else {
    document.getElementById("a").style.display = "block";
  }
}

#a{
width:100px;
height:100px;
background:red;
}
#container{
  min-height:100px;
  width:100px;
  border: 1px solid #000;
}

<div id="container">
  <div id="a">
  </div>
</div>
<input onclick="fun(1)" type="radio">
<input onclick="fun(2)" type="radio">
<input onclick="fun(3)" type="radio">
<input onclick="fun(4)" type="radio">

Answer 4

add id to your first three radio buttons as i mention below

<div class="col-lg-12 col-sm-12 col-xs-12 col-md-12 col-xl-12  ">
    <br>
    <div class="col-sm-3 d">
        <label for="">{{__('main.work_condition')}} : <span class="required-red">*</span> </label>
    </div>
    <div class="col-sm-6 d">
        <label class="">&ensp;<input type="radio" id="first"  style="margin-right:5px" onclick="myfunction(this.id)" name="work_condition" value="1" @if($member->work_condition == 1)
            checked
        @endif   />{{__('main.employee')}}</label>
        <label class="">&ensp;<input type="radio"  id="second" style="margin-right:5px" onclick="myfunction(this.id)" name="work_condition" value="2" @if($member->work_condition == 2)
            checked
        @endif   />{{__('main.retired')}}</label>


        <label class="">&ensp;<input type="radio" id="third"  style="margin-right:5px" onclick="myfunction(this.id)" name="work_condition" value="3" @if($member->work_condition == 3)
            checked
        @endif   />{{__('main.freelance')}}</label>

        <label class="">&ensp;<input type="radio" id="myCheck" style="margin-right:5px" onclick="myfunction(this.id)" name="work_condition" value="4" @if($member->work_condition == 4)
            checked
        @endif   />{{__('main.not_working')}}</label>

    </div>

</div>

and call the following function in onclick event.

function myfunction(id){
if(id=="myCheck"){
$("#text").removeAttr('style');
}
else{
$("#text").css('display','none');
}
}

hope it will help you