<div class="task-checkbox" id="ckbA" onclick="funDivCheck()" > <input type="radio" value="A" name="fruit" /> A、<span class="task-title-sp" id="xuanxiangA"> 选项1 </span> </div> 使用jQuery,获取div下面的子元素input是否选中了
时间: 2024-02-10 18:28:19 浏览: 30
使用 jQuery,你可以使用 `prop()` 方法来检查 `<input>` 元素是否被选中。下面是一个例子,演示如何获取 `<div>` 下的子元素 `<input>` 是否被选中:
```javascript
var isChecked = $('#ckbA input[type="radio"]').prop('checked');
```
在上述代码中,`#ckbA` 是 `<div>` 元素的 ID,`input[type="radio"]` 是选择 `<div>` 下的 `<input>` 类型为 "radio" 的元素。`prop('checked')` 方法用于获取该元素的选中状态,返回一个布尔值。
如果 `isChecked` 的值为 `true`,则表示被选中;如果为 `false`,则表示未被选中。
希望这对你有所帮助!如果还有其他问题,请随时提问。
相关问题
<div class="cart-thead"> <div class="t-checkbox"> <input type="checkbox" name="" id="" class="checkall"> 全选 </div> <div class="t-goods">商品</div> <div class="t-price">单价</div> <div class="t-num">数量</div> <div class="t-sum">小计</div> <div class="t-action">操作</div> </div>改成组件
好的,我可以帮你将这段代码改成一个组件,你可以参考下面的代码:
```js
// CartThead.js
import React from 'react';
function CartThead() {
return (
<div className="cart-thead">
<div className="t-checkbox">
<input type="checkbox" name="" id="" className="checkall" /> 全选
</div>
<div className="t-goods">商品</div>
<div className="t-price">单价</div>
<div className="t-num">数量</div>
<div className="t-sum">小计</div>
<div className="t-action">操作</div>
</div>
);
}
export default CartThead;
```
然后在其他组件中引入 `CartThead` 组件即可:
```js
// OtherComponent.js
import React from 'react';
import CartThead from './CartThead';
function OtherComponent() {
return (
<div>
<CartThead />
{/* 其他内容 */}
</div>
);
}
export default OtherComponent;
```
<!-- 结算模块 --> <div class="cart-floatbar"> <div class="select-all"> <input type="checkbox" name="" id="d" class="checkall">全选 </div> <div class="operation"> <a href="javascript:;" class="remove-batch"> 删除选中的商品</a> <a href="javascript:;" class="clear-all">清理购物车</a> </div> <div class="toolbar-right"> <div class="amount-sum">已经选<em>1</em>件商品</div> <div class="price-sum">总价: <em> </em></div> <div class="btn-area">去结算</div> </div> </div>帮我改成组件
可以将上述代码封装成一个名为 "CartFloatBar" 的组件,代码如下所示:
```
<template>
<div class="cart-floatbar">
<div class="select-all">
<input type="checkbox" name="" id="d" class="checkall">全选
</div>
<div class="operation">
<a href="javascript:;" class="remove-batch"> 删除选中的商品</a>
<a href="javascript:;" class="clear-all">清理购物车</a>
</div>
<div class="toolbar-right">
<div class="amount-sum">已经选<em>{{ selectedCount }}</em>件商品</div>
<div class="price-sum">总价: <em>{{ totalPrice }}</em></div>
<div class="btn-area">去结算</div>
</div>
</div>
</template>
<script>
export default {
name: 'CartFloatBar',
props: {
selectedCount: {
type: Number,
default: 0
},
totalPrice: {
type: Number,
default: 0
}
}
}
</script>
```
在使用该组件时,可以通过传递不同的 props 来动态显示已选商品数量和总价。例如:
```
<CartFloatBar :selectedCount="1" :totalPrice="99"></CartFloatBar>
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)