localStorage:自动选中商店复选框

时间:2017-04-19 10:01:09

标签: javascript php jquery checkbox

我在php中有这样的东西:

    if(isset($_POST['submit']){ 
            $check = in_array($row['service_object_id'], $values) ? 'checked' : ''; 
    }                       
    echo '<input type="checkbox" class="faChkRnd" id="'.$row['service_object_id'].'" name="list[]" value="'.$row['service_object_id'].'" '.$check.'>';

每次按下提交按钮,它都会选中$check内的值复选框。 它工作正常,但我想在按下按钮后自动存储在localStorage中选中的复选框。

我已经使用此脚本在点击后存储它们,但它不会自动运行:

    <script type = "text/javascript"> 
$('.faChkRnd').on('click', function() {
  var fav, favs = [];
  $('.faChkRnd').each(function() { // run through each of the checkboxes
    fav = {id: $(this).attr('id'), value: $(this).prop('checked')};
    favs.push(fav);
  });
  localStorage.setItem("favorites", JSON.stringify(favs));
});

$(document).ready(function() {
  var favorites = JSON.parse(localStorage.getItem('favorites'));
  if (!favorites.length) {return};
  console.debug(favorites);

  for (var i=0; i<favorites.length; i++) {
    console.debug(favorites[i].value == 'on');
    $('#' + favorites[i].id ).prop('checked', favorites[i].value);
  }
});
</script>

有什么想法吗?谢谢!

2 个答案:

答案 0 :(得分:0)

您可以使用提交方法 您有一个带有提交按钮的表单,您必须将其更改为常规按钮。

你应该把

$('.yourForm').submit()  

到单击处理程序的末尾,将值保存到localStorage。

因为当您按下提交按钮时,它可能会在您的点击处理程序之前触发 您需要先保存值,然后提交表单。

答案 1 :(得分:0)

你会检查favorites[i].value的检查类型。 string或boolean!?

string:

if(favorites[i].value == "true") {
    $('#' + favorites[i].id ).prop('checked',true);
}

布尔值:

$('#' + favorites[i].id ).prop('checked',favorites[i].value);

示例:

字符串:https://jsfiddle.net/utm4za2p/1/

布尔:https://jsfiddle.net/utm4za2p/3/