JS控制HTML取消所有Radio的选择，并不可选择。

最新推荐文章于 2025-04-17 15:24:44 发布

violet-jack

最新推荐文章于 2025-04-17 15:24:44 发布

阅读量2w

点赞数

分类专栏： JavaScript 文章标签： html

本文链接：https://blog.youkuaiyun.com/violetjack0808/article/details/52192222

版权

JavaScript 专栏收录该内容

15 篇文章

订阅专栏

需求：有选项1和选项2两个radio，如果点击选项1可以选择子radio选项，点击选项2则清空子radio的选项。

HTML代码：

<div class="col-xs-12">
    <label class="control-label" style="font-weight:bold">肢体形态：</label>
    <label class="control-label">
    <input type="radio" name="Shapes" value="1" />正常
    </label>
    <label class="control-label">
    <input type="radio" name="Shapes" value="2" />异常
    </label>
</div>

<div class="col-xs-12">
    <label class="radio-inline">
    <input type="radio" name="ShapesUnusual" value="1" />畸形
    </label>
    <label class="radio-inline">
    <input type="radio" name="ShapesUnusual" value="2" />缺失
    </label>
    <label class="radio-inline">
    <input type="radio" name="ShapesUnusual" value="3" />肿胀
    </label>
    <label class="radio-inline">
    <input type="radio" name="ShapesUnusual" value="4" />萎缩
    </label>
    <label class="radio-inline">
    <input type="radio" name="ShapesUnusual" value="5" />痉挛
    </label>
    <label class="radio-inline">
     <input type="radio" name="ShapesUnusual" value="6" />存在部位
    </label>
    <input class="" id="ShapesUnusualPart" />
</div>

JS代码：

function radioChanging (name, childName, value) {
   $("input[name="+ name +"]").change(function () {
       if ($('input[name="' + name + '"]:checked ').val() == value) {
          $("input[name=" + childName + "]").each(function () {
             $(this).attr("checked", false);
             $(this).attr("disabled", true);
          })
   } else {
         $("input[name=" + childName + "]").each(function () {
            $(this).attr("disabled", false);
         })
    }
  })
}

最后再jQuery的ready方法中使用这个方法监听目标元素。

radioChanging('Shapes', 'ShapesUnusual', 1);

参数为

父级radio的Name
子级radio的name
点击后会被清空的radio的value