Javascript 单选按钮复选框

单击前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块，我给出了最后一个单选按钮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个单选按钮中阻止，我如何使其显示为“无”，只需使用类即可，即：

$（函数（）{
$（“.blockRadio”）。在（“单击”，函数（）{
$（'#text'）.css（'display'，'block'）；
});
$（“.noneRadio”）。在（“单击”，函数（）{
$（'#text'）.css（'display'，'none'）；
});
});

只需使用类即可，即：

$（函数（）{
$（“.blockRadio”）。在（“单击”，函数（）{
$（'#text'）.css（'display'，'block'）；
});
$（“.noneRadio”）。在（“单击”，函数（）{
$（'#text'）.css（'display'，'none'）；
});
});

试试这个

功能乐趣（e）{
如果（e==4）{
document.getElementById（“a”）.style.display=“无”；
}否则{
document.getElementById（“a”）.style.display=“block”；
}
}

#a{
宽度：100px；
高度：100px；
背景：红色；
}
#容器{
最小高度：100px；
宽度：100px；
边框：1px实心#000；
}

试试这个

功能乐趣（e）{
如果（e==4）{
document.getElementById（“a”）.style.display=“无”；
}否则{
document.getElementById（“a”）.style.display=“block”；
}
}

#a{
宽度：100px；
高度：100px；
背景：红色；
}
#容器{
最小高度：100px；
宽度：100px；
边框：1px实心#000；
}

---

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

---

希望它能帮助您

在我下面提到的前三个单选按钮中添加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>

---

希望它能帮助您

下面是一个使用jQuery的简单示例

$（函数（）{
//为单选按钮创建事件处理程序
$（'[name=work_condition]'）。更改（函数（）{
//根据值显示/隐藏div
$（'#div'）.toggle（this.value！=4）；
});
});

1

2

3

4.
1、2或3被选中
下面是一个使用jQuery的简单示例


$（函数（）{
//为单选按钮创建事件处理程序
$（'[name=work_condition]'）。更改（函数（）{
//根据值显示/隐藏div
$（'#div'）.toggle（this.value！=4）；
});
});

1

2

3

4.
选择1、2或3是为了好玩为什么不：
“123”。indexOf（this.value）
@oMiKeY-Yeah意识到条件可以简化。玩得好的mikey伙伴为什么不：
“123”。indexOf（this.value）
@oMiKeY-Yeah意识到条件可以简化。玩得好的mikey伙伴
<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>

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