单选按钮复选框

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

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

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

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;"/>