Question

我需要4个收音机复选框，当我点击前3个复选框时，div显示样式显示无成为块，当我点击最后一个收音机复选框时，它变为显示无

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

这里是带有样式显示的div：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>

问题是我无法给3个复选框提供相同的ID，因为它只能在第一个复选框上工作，所以我在js中试过这个

$(document).ready(function () {

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

        });
    });


});

这使div块和我给了最后一个单选按钮id并得到它

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

};

但它仍然无法正常工作：＆＃39;）任何人都可以帮助我，如果只点击最后一个单选按钮并在其他3中阻止，我怎么能让它显示无

Answer 1

在前面提到的前三个单选按钮中添加id

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

并在onclick事件中调用以下函数。

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

希望它会帮助你

Answer 2

这是一个使用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为您的单选按钮创建一个事件处理程序
.toggle(condition)根据条件显示或隐藏jQuery对象

Answer 3

试试这个，

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

只需使用类，即：

＆＃13;

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

＆＃13;

单选按钮复选框

4 个答案: