一、选取Radio按钮并添加点击事件
在HTML中，我们可以使用input标签来创建Radio按钮，为了能够选择多个选项的组合，每个Radio按钮必须具有相同的name属性。下面的代码中创建了两个Radio按钮，分别用于选择男性和女性：
<input type="radio" name="gender" value="male" id="male"> <label for="male">男性</label> <input type="radio" name="gender" value="female" id="female"> <label for="female">女性</label>
其中的for属性和label标签是为了能够在点击文本时也能选中相应的Radio按钮。现在，我们需要为这两个Radio按钮添加点击事件。
const male = document.getElementById("male");
const female = document.getElementById("female");
male.addEventListener("click", function(){
console.log("男性被选中了");
});
female.addEventListener("click", function(){
console.log("女性被选中了");
});
上面的代码使用了addEventListener方法为每个Radio按钮添加了一个click事件，当点击任何一个Radio按钮时，相应的回调函数会被执行。
二、防止Radios被禁用
有时候，我们可能会需要禁用Radio按钮，但是如果在被禁用时仍然可以触发click事件，这可能会导致一些奇怪的行为。为了避免这种情况的发生，我们需要添加一个检查项来确保按钮未被禁用：
male.addEventListener("click", function(){
if (!male.disabled) {
console.log("男性被选中了");
}
});
female.addEventListener("click", function(){
if (!female.disabled) {
console.log("女性被选中了");
}
});
上面的代码中，我们在回调函数中添加了一个检查，判断当前按钮是否被禁用。如果被禁用，就不会执行相应的操作。
三、为组件集添加广告
在某些情况下，我们可能需要向Radio按钮组添加广告或其他类似的文本。为了实现这一点，我们可以创建一个新的label元素，并将其插入到Radio按钮周围：
const maleWrapper = document.createElement("div");
maleWrapper.appendChild(male);
maleWrapper.innerHTML += "<label>广告</label>";
const femaleWrapper = document.createElement("div");
femaleWrapper.appendChild(female);
femaleWrapper.innerHTML += "<label>广告</label>";
上面的代码中，我们创建了两个包装器（wrapper），并用appendChild方法将Radio按钮添加到包装器中。然后，我们通过DOM操作将一个新的label元素添加到包装器中。由于我们正在使用innerHTML属性来添加文本，因此我们必须注意如何转义特殊字符。
四、利用原生JavaScript函数实现Radio按钮的选中与取消
在某些情况下，我们需要直接通过JavaScript代码来处理Radio按钮的选中状态，既可以手动选中它，也可以手动取消它：
// 选中男性
male.checked = true;
// 取消女性
female.checked = false;
上面的代码直接使用了input元素的checked属性，将其值设置为true或false来修改按钮的选中状态。
五、结合jQuery实现Radio按钮的选中与取消
如果你使用jQuery，可以使用.prop方法来选中或取消选中Radio按钮：
$(":radio[value='male']").prop("checked", true);
$(":radio[value='female']").prop("checked", false);
上面的代码是一个jQuery片段，使用$函数选取所有value属性为”male”和”female”的Radio按钮，然后使用.prop方法来修改其选中状态。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/312807.html
微信扫一扫 
支付宝扫一扫 