js获取单选框/多选框选中的值value

注意给value值

  <input type="radio" name="sex" checked="checked" value="男">男
  <input type="radio" name="sex" value="女">女
   <input type="submit" value="提交" onclick="getMessage()">

遍历数组后,判断选中的元素

<script>
    function getMessage() {
        let sex = document.getElementsByName("sex")
        let item;
        for (let i = 0; i < sex.length; i++) 
            if (sex[i].checked) {
                item = sex[i].value;
            }
        }
    }
</script>

 复选框

<input type="checkbox" checked name="like" value="1">体育运动
<input type="checkbox" name="like" value="2">旅游
<input type="checkbox" name="like" value="3">书画

注意声明个数组去接收值

<script>
    function getMessage() {
    let likeArray = document.getElementsByName("like");
        let like;
        let value = [];
        for (let i = 0; i < likeArray.length; i++) {
            if (likeArray[i].checked) {
                like = likeArray[i].value;
                value.push(like)
            }
        }
</script>
  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
以下是一个简单的示例,使用Vue.js来实现多选框的全选、单选和反选: HTML代码: ```html <div id="app"> <input type="checkbox" v-model="selectAll" @change="selectAllCheck"> <label>全选</label> <br> <input type="checkbox" v-model="checkedItems" value="1"> <label>选项1</label> <br> <input type="checkbox" v-model="checkedItems" value="2"> <label>选项2</label> <br> <input type="checkbox" v-model="checkedItems" value="3"> <label>选项3</label> <br> <button @click="checkAllItems">全选</button> <button @click="uncheckAllItems">全不选</button> <button @click="invertSelection">反选</button> </div> ``` Vue.js代码: ```javascript new Vue({ el: '#app', data: { checkedItems: [], selectAll: false }, methods: { selectAllCheck: function() { if (this.selectAll) { this.checkedItems = [1, 2, 3]; } else { this.checkedItems = []; } }, checkAllItems: function() { this.checkedItems = [1, 2, 3]; this.selectAll = true; }, uncheckAllItems: function() { this.checkedItems = []; this.selectAll = false; }, invertSelection: function() { var self = this; var uncheckedItems = this.checkedItems.filter(function(item) { return !self.checkedItems.includes(item); }); this.checkedItems = uncheckedItems.concat([1, 2, 3].filter(function(item) { return !uncheckedItems.includes(item); })); } } }) ``` 在这个示例中,我们使用`v-model`指令来绑定多选框选中状态,并使用`@change`事件来监听全选框的状态变化。`selectAllCheck`方法会在全选框的状态变化时被调用,根据全选框的状态更新选中多选框。 我们还定义了三个方法:`checkAllItems`、`uncheckAllItems`和`invertSelection`,分别用于全选、全不选和反选多选框。在`checkAllItems`方法中,我们将所有多选框选中,并将全选框的状态设置为`true`。在`uncheckAllItems`方法中,我们将所有多选框都不选中,并将全选框的状态设置为`false`。在`invertSelection`方法中,我们将未选中多选框选中,已选中多选框取消选中
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

BroRiver

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值