复选框 - 选中取消选中功能不起作用

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

复选框检查jquery在加载后不起作用

当 [选中] 应用于垫单选按钮时,OnChange 不起作用

选中的复选框不起作用?