单选按钮复选框

Question

当我单击前 3 个复选框时，我需要 4 个单选复选框，样式显示无的 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 样式为 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>

问题是我不能为 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";
  }
}

};

但它仍然不起作用 :') 谁能帮助我，如果仅单击最后一个单选按钮并阻止其他 3 个单选按钮，我该如何使其不显示任何内容

Answer 1

这是一个使用 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 2

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

只需使用类，即：

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