Unable to bind wpf checkbox IsChecked to datatrigger and View Model

I have a wpf user control that has a checkbox for each day of the week and another checkbox for all days. I can set the individual days by clicking the all days check box using data triggers. However I am using caliburn micro and a view model with Notify of property change. When I add binding in any format to the view model the ischecked property stops working, the isenabled continues to work. I have tried several different bind methods without any success. I am very much self taught and trying to work things out using youtube and google but this has me stumped - should I use ivalueconverter? Here is a part of my xml code

        <CheckBox x:Name="CheckSaturdayCkBx" Content="Saturday" IsChecked="{Binding SaturdayCkBx}"
                   Grid.Row="1" Grid.Column="3">
            <CheckBox.Style>
                <Style TargetType="{x:Type CheckBox}">
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding ElementName=AllDaysCkBx,Path=IsChecked}" Value="True">
                            <Setter Property="IsChecked" Value="True"/>
                            <Setter Property="IsEnabled" Value="False"/>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </CheckBox.Style>
        </CheckBox>

        <CheckBox x:Name="SundayCkBx" Content="Sunday"
                   Grid.Row="2" Grid.Column="3">
            <CheckBox.Style>
                <Style TargetType="{x:Type CheckBox}">
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding ElementName=AllDaysCkBx,Path=IsChecked}" Value="True">
                            <Setter Property="IsChecked" Value="True"/>
                            <Setter Property="IsEnabled" Value="False"/>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </CheckBox.Style>
        </CheckBox>

        <CheckBox x:Name="AllDaysCkBx" Content="All Days"
                   Grid.Row="4" Grid.Column="3"/>

The property SaturdayCkBx and SundayCkBx are bound to the view model I need these if I want to load data from a database table. I have above tried two variations without any joy - remove these bindings to view model and it works. Any help pointers very much appreciated.

Checkboxes not displaying in firefox

Despite the errors that show up in the console, the checkboxes are loading for another program but for my program they aren't displaying. The errors I get are:

Blocked loading mixed active content “checkboxesfilelocation.js”
Blocked loading mixed active content “checkboxesfilelocation.css”
Blocked loading mixed active content "checkboxesfilelocation.js”
Loading failed for the <script> with source “checkboxesfilelocation.js”
Blocked loading mixed active content “checkboxesfilelocation.css”

This Why am I suddenly getting a "Blocked loading mixed active content" issue in Firefox? doesn't answer my question since I always received those errors and the older program I have runs perfectly despite those errors but the current program I'm working on, having those same errors, does not.

I believe they could not be displaying due to the sizing of the wrapper and form (the css), which are different from the older original program. I tried increasing the sizing in the css but it still didn't show. This is the file that creates the checkboxes which relies on checkboxesfilelocation.

<script type='text/javascript' src='checkboxesfilelocation.js'></script>
<link rel="stylesheet" type="text/css" href="checkboxesfilelocation.css">
<div id='checkbox-div'>
<form id='location-form' action="javascript:void(0);">
<?php
    //database etc., creating arrays
    echo "<span class='expand' onclick='expand(this)'>Countries <span class='expand-symbol'>+</span></span><div class='location-div'>";
    foreach ($countries as $country){
        echo "<input type='checkbox' id='$country' class='location-checkbox'><label for='$country'>".$country."</label><br>";
    }
    echo "</div><span class='expand' onclick='expand(this)'>Cities <span class='expand-symbol'>+</span></span><div class='location-div'>";
    foreach ($cities as $city){
        echo "<input type='checkbox' id='$city' class='location-checkbox'><label for='$city'>".$city."</label><br>";
    }
    echo "</div>";
?>
</form>
</div>
<script>
//code to deal with when a checkbox is checked/unchecked
</script>

The expand function does this though I don't think it has anything to do with the checkboxes not showing up since "Countries +" and "Cities +" doesn't show up the page. Although, in the other program, the function doesn't work. The checkboxes are already expanded to show all of them.

function expand(element){
    var list = element.nextSibling;
    var symbol = element.firstElementChild;
    if (list.style.display == 'block'){
        list.style.display = 'none';
        symbol.innerHTML = '+';
    } else {
        list.style.display = 'block';
        symbol.innerHTML = '−';
    }
}

I include this file that creates the checkboxes inside my main file that runs the website using html and css like so:

<style>
body{
    min-width: 890px;
    font-size: 0px;
    font-family: Arial, Sans-Serif;
    margin-left: 6px;
}
div>p{
    margin: 10px;
}
body>p{
    max-width: 885px;
}
#barchart {
    /*barchart styling*/
}
#wrapper{
    position: relative;
    display: inline-block;
}
</style>
  </head>
  <body id='body'>
<div id='wrapper'>
<div id="barchart" class="chart"></div>
<?php
include 'file location that creates checkboxes.php';
?>
</div>
</body>

The original program (where the checkboxes do display and work perfectly) has this styling and html:

<style>
body{
    font-family: Arial, Sans-Serif;
    font-size: 14px;
}
#wrapper{
    width: 1010px;
    height: 530px;
}
#bar-graph{
    /*bar graph styling*/
}
#options{
    padding: 5px;
    float: left;
}
#citation{
    position: absolute;
}
select{
    margin-right: 15px;
}
</style>
</head>
<body id='body'>
<div id='wrapper'>
<div id='bar-graph'></div>
<?php
include 'file location that creates checkboxes.php';
?>
</div>
</body>

How can i manipulate checkbox selection?

import 'package:flutter/material.dart';
import 'package:linq_pay_app/src/CarBikeInsurance/widgets/LSLayout.dart';
import 'package:linq_pay_app/src/CarBikeInsurance/widgets/fields/LSTextField.dart';
import 'package:grouped_buttons/grouped_buttons.dart';

class HealthInsurance extends StatefulWidget {
  @override
  _HealthInsuranceState createState() => _HealthInsuranceState();
}

class _HealthInsuranceState extends State<HealthInsurance> {

  List<String> selectedMembers;

  Widget Page1(){
    return Container(
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Text("Residence Pincode",style: TextStyle(fontWeight: FontWeight.bold),),
            SizedBox(height: 10.0,),
            LSTextField(label: "Enter Pincode",),
          ],
        ),
      ),
    );
  }

  Widget Page2(){
    return ListView(
        children: <Widget>[

          Container(
            padding: const EdgeInsets.only(left: 14.0, top: 14.0),
            child: Text("Add the members you want to insure:",
              style: TextStyle(
              fontWeight: FontWeight.bold,
              fontSize: 20.0
              ),
            ),
          ),

        CheckboxGroup(
          labels: <String>[
          "Self",
          "Spouse",
          "Son",
          "Daughter",
          "Mother",
          "Father",
          "Mother-in-law",
          "Father-in-law",
          ],

        onChange: (bool isChecked, String label, int index) => print("isChecked: $isChecked   label: $label  index: $index"),
        onSelected: (List<String> checked) => selectedMembers=checked,
        ),
      ]
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        iconTheme: IconThemeData(
          color: Colors.black,
        ),
        title: Text("Back"),
        centerTitle: false,
      ),
      body: Page2()
    );
  }
}

There are 2 issues: 1. If the user selects Son or daughter, he should get an option ahead of son field to add or subtract the number of son or daughter and can keep a track of how many son or daughter he has selected.

2. If the user selects his parents, he cannot select his mother-in-law and father-in-law and vice versa.

Problem with position text in cell after use input checkbox

I created a table using a table generator using a online service. I needed to use the checkbox in the table. After I inserted the input checkbox in column with name "column name one", the link dropped a few pixels down. How to up the link in the case below? I tried different ways but it didn't work out. How to make that the link does not fall and remains on the same level with the text in other columns?

.divTable{
        display: table;
        width: 100%;
        table-layout: fixed;
}

.divTableRow {
    display: table-row;
}

.divTableHeading {
        background-color: #EEE;
        display: table-header-group;
}

.divTableCell, .divTableHead {
        border: 0px solid #999999;
        display: table-cell;
        padding: 0px 0px;
        vertical-align: top;
/*      width: 33%; */
}

.divTableHeading {
        background-color: #EEE;
        display: table-header-group;
        font-weight: bold;
}

.divTableFoot {
        background-color: #EEE;
        display: table-footer-group;
        font-weight: bold;
}

.divTableBody {
    display: table-row-group;
}

input[type=checkbox] {
        cursor: pointer;
        font-size: 17px;
        visibility: hidden;
        position:relative;
                display: inline-block;
        transform: scale(0.8);
         -moz-appearance: none !important;

}

input[type=checkbox]:after {
        content: " ";
        position:relative;
        top: -50%;
        background-color: #fff;
        display: inline-block;
        color: #00BFF0;
        width: 22px;
        height: 21px;
        visibility: visible;
        border: 1px solid #b0b0b0;
        padding: 0 3px;
        margin: -2px 0;
        border-radius: 8px;
        box-shadow: 0 0 15px 0 rgba(0,0,0,0.08), 0 0 2px 0 rgba(0,0,0,0.16);
         -moz-appearance: none !important;

}

input[type=checkbox]:checked:after {
        content: "\2714";
        display: unset;
        position:relative;
                display: inline-block;
        font-weight: bold;
         -moz-appearance: none !important;
        
}

<br><br>
<div class="divTable blueTable">

        <div class="divTableHeading">
        <div class="divTableRow">

        <div class="divTableHead">column name one</div>
        <div class="divTableHead">column name two</div>
        <div class="divTableHead" style="text-align: right;">column name three</div>

        </div>
        </div>

<div class="divTableBody">

<div class="divTableRow" id="price" style="height: 34px">

<div class="divTableCell"> <input type="checkbox" value="1" >&nbsp;&nbsp;<a href="orderdetails?">link</a></div> 
<div class="divTableCell">text</div>
<div class="divTableCell" id="price" style="text-align: right;">text</div>

</div>


</div></div>

jQuery: find elements where data attribute is has a specific value

I have a master checkbox Select all along with a button to revert back to their original state to which there were loaded with. After the page is loaded I bind a data property to each of the checkboxes that if there were loaded as checked or un-checked.

$('input[type="checkbox"]').each((i, e) => {
    if($(e).is(':checked'))
       $(e).data('default', true);
});

$('.js-select-all').on('mouseup', () => {
    $('input[type="checkbox"]').prop('checked', true);
});

I need to find the checkboxes where data property called default is true and mark them checked again.

$('.js-revert').on('mouseup', () => {
    $('input[type="checkbox"]').data('default', true).prop('checked', true);
});

I know it can be done with each loop and a condition. But the thing is that I'll have to go through all the checkboxes to do so. Therefore, I am looking for a faster way as there are already dozens of checkboxes in the application.

Setting varibable to saved value always gets true

I am working on a desktop application with electron, which means, that I am using javascript and other web tools. In this bit of code, I am trying to read a boolean from localStorage and writing it to the checked attribute of an HTML-checkbox: devtools = document.getElementById('dev-tools-checkbox'); console.log('The saved value: ' + localStorage.getItem('devtools')); devtools.checked = localStorage.getItem('devtools');

The strange thing is, that no matter what the console shows the logged value as, the checkbox always gets set to true. When reversing the input like this devtools.checked = !localStorage.getItem('devtools'); the value is always false. I have checked that the right value is set, and the logged value is correct.

When I set the following: devtools.checked = false; it correctly sets the value to false. Same with devtools.checked = true.

Any clue as to where the always true value is coming from would be greatly appreciated. If you need any more information, just ask.

Thanks in advance

html

So I am making a survey website where you can create survey forms and fill them after, my question is if I have a question where i have a collection of it's options with bool if the option is marked on filling or not, how do I set that value to the model when i click onto Submit form button In short words get all marked answers from the questions, pass them to the controller as a separate view model that contains only the ID of the question and the given answer

Here is the class of the question :

 public class OptionsQuestionVM
    {
        public Guid Id { get; set; }

        public Guid FormId { get; set; }

        public bool IsAnswered { get; set; }
        public bool IsDeleted { get; set; }


        public string Name { get; set; }
        public ICollection<OptionModelVM> Options { get; set; }
        public bool IsRequired { get; set; }
        public bool HasMultipleAnswers { get; set; }

    }

Here is the class of the OptionModelVM:

public class OptionModelVM
    {
        public Guid Id { get; set; }

        public string Text { get; set; }
        public bool IsMarked { get; set; } 
        public OptionsQuestionVM Question { get; set; }
        public Guid OptionsQuestionId { get; set; }
    }

And here is my HTML Code for the checkbox that will be displayed for each question and it's available answers:

@foreach (var item in Model.OptionsQuestions)
                    {
                        if (item.HasMultipleAnswers == true)
                        {
                            <div class="element-checkbox">
                                <hr>
                                <h4>@item.Name</h4>
                                <div class="column column1">


                                    @foreach (var option in item.Options)
                                    {
                                        <label>
                                            <input type="checkbox" name="checkbox[]" value="option 1" />
                                            <span style="font-size:medium">@option.Text</span>
                                        </label>
                                        <br />
                                    }



                                </div><span class="clearfix"></span>
                            </div>
                        }
                        else
                        {

                                <div class="element-checkbox" single>
                                    <hr>
                                    <h4>@item.Name</h4>
                                    <div class="column column1">


                                        @foreach (var option in item.Options)
                                        {
                                            <label>
                                                <input type="checkbox" name="checkbox[]" value="option 1" />
                                                <span style="font-size:medium">@option.Text</span>
                                            </label>
                                            <br />
                                        }



                                    </div><span class="clearfix"></span>
                                </div>

                        }

                    }

And also it would help if someone tells me how to set the HasMultipleAnswers bool into the checkbox, so that when its true you can mark more than 1 answer, when false you can choose only 1 Thank you :)