复选框 - 选中取消选中功能不起作用
Posted
技术标签:
【中文标题】复选框 - 选中取消选中功能不起作用【英文标题】:checkbox - Check uncheck functionality is not working 【发布时间】:2016-05-26 17:17:30 【问题描述】:我的情况:
我正在开发一个购物车应用程序,它包含一些过滤器:
按颜色过滤(复选框)
按样式过滤(复选框)
在选择一些颜色时,我的网址变成这样:
http://example.com/women/try.php?color=10,11,12,13
我的问题:
在取消选中某些颜色时,相关参数不会从 url 中清除。
另外,当我选择一些样式时,我希望 url 是这样的:
http://example.com/women/try.php?color=10,11,12,13&style=1,2,3
请帮助我如何实现此功能。
我的代码:
<?php
$colors = $_GET['color'];
$sel_colors = explode(',', $colors);
foreach($sel_colors as $k=>$v)
$c['check'][$v] = $v;
for($i=10;$i<=14;$i++) ?>
<input type="checkbox" name="color[]" value="<?php echo $i; ?>" <?php echo $check_value = ($c['check'][$i]) ? 'checked' : '0'; ?> >
<label>Color #<?php echo $i.'--'.$check_value; ?></label><?php
?><br/><br/><br/>
<input type="checkbox" name="type" value="1" >
<label>style #1</label>
<input type="checkbox" name="type" value="2" >
<label>style #2</label>
<input type="checkbox" name="type" value="3" >
<label>style #3</label>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js" ></script>
<script type="text/javascript">
var baseUrl = 'http://website/women/try.php?color=';
$(document).ready(function ()
// listen to change event (customize selector to your needs)
$('input[type=checkbox]').change(function (e)
e.preventDefault();
if ($(this).is(':checked'))
// read in value
var queryString = $(this).val();
// loop through siblings (customize selector to your needs)
var s = $(this).siblings();
$.each(s, function ()
// see if checked
if ($(this).is(':checked'))
// append value
queryString += ',' + $(this).val();
);
// jump to url
window.location = baseUrl + queryString;
);
);
</script>
【问题讨论】:
Append the checkbox selected values with url as querystring的可能重复 【参考方案1】:这是一个工作解决方案的代码 sn-p。颜色复选框的名称从 color[]
更改为 color
var baseUrl = 'http://website/women/try.php?';
$(document).ready(function ()
// listen to change event (customize selector to your needs)
$('input[type=checkbox]').change(function (e)
//Get all the selected color values
var queryString = "color="+$('[name="color"]:checked')
.map(function() return this.value;).get().join(',');
//Append all the selected styles
queryString += "&style="+$('[name="type"]:checked').map(function() return this.value;).get().join(',');
//reload page - commented for this snippet
//window.location = baseUrl + queryString;
alert(baseUrl + queryString);
);
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Color filter -->
<input type="checkbox" name="color" value="1" checked >
<label>Color 1</label>
<input type="checkbox" name="color" value="2" checked >
<label>Color 2</label>
<input type="checkbox" name="color" value="3" checked >
<label>Color 3</label>
<input type="checkbox" name="color" value="4" checked >
<label>Color 4</label>
<BR><BR>
<!-- Style filter -->
<input type="checkbox" name="type" value="1" >
<label>style #1</label>
<input type="checkbox" name="type" value="2" checked>
<label>style #2</label>
<input type="checkbox" name="type" value="3" checked>
<label>style #3</label>
【讨论】:
【参考方案2】:使用map()
函数获取所有选中的颜色和样式checkbox
值,如下所示。
var baseUrl = 'http://website/women/try.php?color=';
$('input[name="color[]"], input[name="type"]').change(function ()
var colors = $('input[name="color[]"]:checked').map(function () return this.value; ).get().join();
var styles = $('input[name="type"]:checked').map(function () return this.value; ).get().join();
window.location = baseUrl + colors + '&style=' + styles;
);
【讨论】:
以上是关于复选框 - 选中取消选中功能不起作用的主要内容,如果未能解决你的问题,请参考以下文章
removeAttribute('checked') 不起作用
在 s-s-rS 报告中使用级联多选下拉菜单时,取消选中所有复选框不起作用
如何使用复选框来选中或取消选中所有框到handsontable