写一个单选框用onchange判断
时间: 2024-05-22 13:15:26 浏览: 20
<html>
<body>
<form>
<input type="radio" name="gender" value="male" onchange="checkGender()"> Male<br>
<input type="radio" name="gender" value="female" onchange="checkGender()"> Female<br>
<input type="radio" name="gender" value="other" onchange="checkGender()"> Other<br>
</form>
<script>
function checkGender() {
var gender = document.querySelector('input[name="gender"]:checked').value;
alert("You selected " + gender);
}
</script>
</body>
</html>
相关问题
封装一个单选框组件,可以传值
好的,我可以帮你封装一个单选框组件,可以通过传值来设置选中项。以下是示例代码:
```jsx
import React from 'react';
function RadioButton({ options, selectedOption, onChange }) {
return (
<div>
{options.map(option => (
<label key={option.value}>
<input
type="radio"
value={option.value}
checked={selectedOption === option.value}
onChange={() => onChange(option.value)}
/>
{option.label}
</label>
))}
</div>
);
}
export default RadioButton;
```
其中,`options` 是单选框选项的数组,每个选项包含 `value` 和 `label` 两个属性;`selectedOption` 是当前选中的选项的值;`onChange` 是选中某个选项时的回调函数。
你可以在父组件中使用该组件,并通过传值来设置选中项,示例代码如下:
```jsx
import React, { useState } from 'react';
import RadioButton from './RadioButton';
function App() {
const [selectedOption, setSelectedOption] = useState('option1');
const options = [
{ value: 'option1', label: 'Option 1' },
{ value: 'option2', label: 'Option 2' },
{ value: 'option3', label: 'Option 3' },
];
const handleOptionChange = (value) => {
setSelectedOption(value);
};
return (
<div>
<RadioButton
options={options}
selectedOption={selectedOption}
onChange={handleOptionChange}
/>
</div>
);
}
export default App;
```
在上述示例中,我们使用了 `useState` 来保存当前选中项的值 `selectedOption`,并将其作为 `RadioButton` 组件的 `selectedOption` 属性传递进去。当用户选择某个选项时,`handleOptionChange` 函数会更新 `selectedOption` 的值,从而实现选中项的变更。
用vue 写一个穿梭框
好的,以下是一个简单的Vue穿梭框组件:
```html
<template>
<div class="transfer-box">
<h3>可选项</h3>
<ul class="transfer-list">
<li v-for="(option, index) in options" :key="index" v-show="!option.checked">
<label>
<input type="checkbox" v-model="option.checked" @change="onChange(index, option)">
{{ option.label }}
</label>
</li>
</ul>
<button @click="addToSelected">添加</button>
<button @click="removeFromSelected">移除</button>
<h3>已选项</h3>
<ul class="transfer-list">
<li v-for="(option, index) in selectedOptions" :key="index" v-show="option.checked">
<label>
<input type="checkbox" v-model="option.checked" @change="onChange(index, option)">
{{ option.label }}
</label>
</li>
</ul>
</div>
</template>
<script>
export default {
name: "TransferBox",
props: {
options: {
type: Array,
required: true,
},
},
data() {
return {
selectedOptions: [],
};
},
methods: {
addToSelected() {
this.options.forEach((option) => {
if (option.checked) {
option.checked = false;
this.selectedOptions.push(option);
}
});
},
removeFromSelected() {
this.selectedOptions.forEach((option) => {
if (option.checked) {
option.checked = false;
this.options.push(option);
}
});
this.selectedOptions = this.selectedOptions.filter(
(option) => !option.checked
);
},
onChange(index, option) {
if (this.selectedOptions.indexOf(option) !== -1) {
this.$set(this.selectedOptions, index, option);
} else {
this.$set(this.options, index, option);
}
},
},
};
</script>
<style>
.transfer-box {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin-top: 20px;
}
.transfer-list {
list-style-type: none;
padding: 0;
width: 150px;
height: 150px;
border: 1px solid #ccc;
overflow-y: scroll;
margin-right: 10px;
}
.transfer-list li {
margin: 5px 0;
}
button {
margin-top: 50px;
font-size: 16px;
padding: 5px 15px;
border-radius: 3px;
border: none;
background-color: #007aff;
color: #fff;
}
button:hover {
cursor: pointer;
}
</style>
```
这里的核心逻辑是将选中的选项从可选项列表中移动到已选项列表中,以及将已选项列表中的选项移回到可选项列表中。通过checkbox的v-model绑定,可以方便地实现选中状态的同步。同时,onChange方法可以用来处理选中状态的改变,并将相应的选项从一个列表移动到另一个列表中。