Checkbox tick issue in IE browser

custom checkbox tick not working in ie and firefox browser, its shows default tick,how to change default tick into custom tick in ie browser. Please give me some idea!!

Below the following code of checkbox

input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
    height: 17px;
    width: 17px;
    cursor: pointer;
    position: relative;
    -webkit-transition: .15s;
    border-radius: 5px 5px 5px 0;
    border: 1px solid #d7d7d7;
    vertical-align: middle;
    background-color: #fff;
}

    input[type="checkbox"]:before, input[type="checkbox"]:checked:before {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        line-height: 1.2em;
        text-align: center;
        color: #656464;
        content: '';


    }

    input[type="checkbox"]:checked:before {
        content: '✔';


    }

/*checkbox code for IE browser*/
::-ms-check {
        cursor: pointer;
        position: relative;
        -webkit-transition: .15s;
        -moz-transition: .15s;
        -ms-transition: .15s;
        border-radius: 5px 5px 5px 0;
        border: 1px solid #d7d7d7;
        vertical-align: middle;
        background-color: #fff;
        color:#656464;

    }


    ::-ms-check:before, ::-ms-check:checked:before {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        line-height: 1.2em;
        text-align: center;
        color: #656464;
        content: '';
    }

    ::-ms-check:before {
        content: '✔';
    }

JQuery: Checkbox Chain not working properly

I have 'chain' of checkboxes (parent checkbox and childs), and problem is:

When first clicking on 'parent' checkbox it is working well, but after that when clicking on 'childs', the 'parent' checkbox then isn't doing what is supposed. Parent is checking/unchecking childs except the child which was pressed before.

Here is code:

JavaScript

checks_bind();
function checks_bind(){
  $("#x_main").off('click');
  $("#x_main").on('click',function(){
  var obj   = $(this);
    var val = obj.is(':checked');
    $("#checks").find("input[type='checkbox']").attr('checked',val);
  });
}

HTML

<input id='x_main' type='checkbox'/>Main<br>
<p>--------------------------------</p>
<div id='checks'>
<input type='checkbox'/>1<br>
<input type='checkbox'/>2<br>
</div>
<p>--------------------------------</p>
<i>1 - Click on 1 or 2 <br>2 - Try <b>Main</b> checkbox. <br>
3 - Main checkbox isn't working</i>

jsfiddle example

And one more question:

Is it good to use .on('click.namespace') on checkboxes since it's working well? I can use .change() method, but I want to call .off('click.namespace') (or something to unbind) before .on() each time when calling the function.

Java Checkbox Save

i Need some help with saving checkboxes, im new in this and hope i'll get some help.

What i want to do: I want to save the Settings:

if(e.getSource() == einstellung){


        JFrame meinJFrame = new JFrame();
        meinJFrame.setTitle("JRadioButton Beispiel");
        meinJFrame.setSize(400,300);
        JPanel panel = new JPanel();
        panel.setBackground(Color.BLACK);
 //Checkbox 1

        JCheckBox check = new JCheckBox("Activate Wall at the score of 500k.", false);

        panel.add(check);

      //Checkbox 2
        JCheckBox check1 = new JCheckBox ("Activate Trump Tower at the score of 1 million.", false);

        panel.add(check1);           

        meinJFrame.add(panel);
        meinJFrame.setVisible(true);

It's for a little game i am creating and i just want to save the checkboxes, so they are checked (or not) when i start the Programm again.

The full code (please do not use it for private things like using it for your own game or sth like that):

private JButton schliessen;
private JButton einstellung;
private JButton info;
private JButton ende;
private JTextField Textbox;

JCheckBox redCB, blueCB, greenCB, yellowCB;


public static void main(String[] args) throws Exception {






    frame frame = new frame("Jump Trump Menu");
    frame.setResizable(false);
    frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    frame.setSize(400,460);
    frame.getContentPane().setBackground(Color.BLACK);  


    frame.setLayout(null);
    frame.setVisible(true);














}








public frame(String title) {

    super(title);

    schliessen = new JButton("Play");
    schliessen.setBounds(120,40,160,40);
    schliessen.addActionListener(this);
    add(schliessen);
    schliessen.setBorderPainted(false);
    schliessen.setFocusPainted(false);
    schliessen.setContentAreaFilled(true);
    schliessen.setHorizontalAlignment(JButton.CENTER);

    einstellung = new JButton("Settings");
    einstellung.setBounds(120,120,160,40);
    einstellung.addActionListener(this);
    add(einstellung);
    einstellung.setBorderPainted(false);
    einstellung.setFocusPainted(false);
    einstellung.setContentAreaFilled(true);
    einstellung.setHorizontalAlignment(JButton.CENTER);

    info = new JButton("Special Contract");
    info.setBounds(120,200,160,40);
    info.addActionListener(this);
    add(info);
    info.setBorderPainted(false);
    info.setFocusPainted(false);
    info.setContentAreaFilled(true);
    info.setHorizontalAlignment(JButton.CENTER);

    ende = new JButton("Exit");
    ende.setBounds(120,280,160,40);
    ende.addActionListener(this);
    add(ende);
    ende.setBorderPainted(false);
    ende.setFocusPainted(false);
    ende.setContentAreaFilled(true);
    ende.setHorizontalAlignment(JButton.CENTER); 

    Textbox = new JTextField("Pre Alpha 0.0.5");
    Textbox.setHorizontalAlignment(JTextField.CENTER); 
    Textbox.setBounds(120,360,160,40);
    add(Textbox);
    Textbox.setEditable (false);


}



public static void fenster(){


    JFrame fenster = new JFrame("JumpTrump");
    fenster.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    fenster.setSize(650,350);
    fenster.setVisible(true);
    fenster.add(new gui());
    fenster.setResizable(false);







    }

//public static void auswahl(){

//}



@Override
public void actionPerformed(ActionEvent e) {

    // TODO Auto-generated method stub

    if (e.getSource()== schliessen ){
        fenster();


            URL url = SoundTest.class.getResource("donald.au");
            AudioClip clip = Applet.newAudioClip(url);

            clip.play();

            clip.loop();

    }

    if (e.getSource() == info ){
        Object[] options = { "Agree", "Disagree", "Die Now"};


        if (e.getSource()== options){
            System.exit(0);
        }
    int result =    JOptionPane.showOptionDialog(null,"Programmed by Zensoran your lord and king  ! By clicking (Agree) you swear that you give your life to the holy King of Steam (Lord Gaben), by clicking (Disagree) you won't get a Steam Summer sale!","Contract",JOptionPane.YES_NO_CANCEL_OPTION,JOptionPane.PLAIN_MESSAGE,null,options,options[2]);    

        if (result == JOptionPane.YES_OPTION);
        if (result == JOptionPane.NO_OPTION) System.exit(0);
        if (result == JOptionPane.CANCEL_OPTION) System.exit(0);

    }


    if(e.getSource() == einstellung){


        JFrame meinJFrame = new JFrame();
        meinJFrame.setTitle("JRadioButton Beispiel");
        meinJFrame.setSize(400,300);
        JPanel panel = new JPanel();
        panel.setBackground(Color.BLACK);
 //Checkbox 1

        JCheckBox check = new JCheckBox("Activate Wall at the score of 500k.", false);

        panel.add(check);

      //Checkbox 2
        JCheckBox check1 = new JCheckBox ("Activate Trump Tower at the score of 1 million.", false);

        panel.add(check1);           

        meinJFrame.add(panel);
        meinJFrame.setVisible(true);















    }

    if(e.getSource() == ende){

        if (JOptionPane.showConfirmDialog(null, "Are you sure you want to quit?", "WARNING",
                JOptionPane.YES_NO_OPTION) == JOptionPane.YES_OPTION) {
            System.exit(ERROR);
        } else {


              }
            }











}

}

at least one checkbox must stay selected on deselect action of one of them

I have a few checkboxes on a form and i want to validate them when deselecting every one of them. So at least one checkbox must stay selected on deselect event.

function validateCBox() {
var checkBoxes = document.getElementsByClassName('myCBox');
var isChecked = false;
    for (var i = 0; i < checkBoxes.length; i++) {
        if ( checkBoxes[i].checked ) {
            isChecked = true;
        };
    };
    if ( isChecked ) {
        alert( 'checked!' );
        } else {
            alert( 'please check at least one checkbox!' );
        }   
}

<form>
  <input type = "checkbox" class='myCBox' value = "a">1
  <input type = "checkbox" class='myCBox' value = "b">2 
  <input type = "checkbox" class='myCBox' value = "c">3
  <input type = "checkbox" class='myCBox' value = "d">4
</form>
<input type = "button" value = "Edit and Report" onClick="validateCBox()">

jquery checkbox is not working on single click

I am not sure what i am doing wrong but i have to changge a checkbox state on click of an image and its not working

I have a checkbox in a repeater controls whose attribute data-id-chk gets set from page behined

<asp:CheckBox ID="chk_QuizQuestionOptionGUID" runat="server" CssClass="QuestionFormRadioButton" data-id-chk="0" />

then there is a aspx wheere i am simplay calling the javascript function on click of an image. but i want to change checkbox state which is not getting changed.

function AddRemoveStyle(target) {
    try {

    var dataid = $(target).attr("data-id-img");

    var mychk = $('[data-id-chk="'+ dataid +'"]');

    var ckb = $(mychk[0]).is(':checked');
    if (!$(mychk[0]).is(':checked')) {
        $(mychk[0]).prop('checked', true);
    }
    else{           
        $(mychk[0]).prop('checked', false);
    }


    }
    catch (e) {
        // statements to handle any exceptions
        alert(e); // pass exception object to error handler
    }
}

</script>

here is the image to call the above method:

<a href="#" id="Photo4">
<div>
<div>
<asp:Label ID="lbl_QuizQuestionOptionGUID" runat="server" Visible="false" Text='<%#Eval("QuizQuestionOptionGUID")%>'></asp:Label>
<img id="img_Option" runat="server" src="/assets/images/null.gif" alt="null" onclick="AddRemoveStyle(this);" />                                                                                                 
</div>
</div>

Checked="Checked" not working after target Checkbox was clicked once

I have the following GridView:

<asp:GridView ID="gvSpecificRights" runat="server" AutoGenerateColumns="false" OnRowCreated="gvSpecificRights_RowCreated" CssClass="mGrid" ShowHeaderWhenEmpty="true" ShowFooter="true">
    <Columns>
        <asp:BoundField DataField="ID" HeaderText="ID" SortExpression="ID" />
        <asp:TemplateField HeaderText="Name">
            <ItemTemplate><asp:Label ID="lblName" runat="server" Text='<%# Bind("Name") %>'></asp:Label></ItemTemplate>
            <FooterTemplate><asp:DropDownList ID="ddlAvailableUsers" runat="server"></asp:DropDownList></FooterTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Create" ItemStyle-HorizontalAlign="Center" FooterStyle-HorizontalAlign="Center">
            <ItemTemplate><asp:CheckBox ID="cbTickCreator" runat="server" Checked='<%# Eval("TickCreator") %>' CssClass="clicknext"></asp:CheckBox></ItemTemplate>
            <FooterTemplate><asp:CheckBox ID="cbFooterTickCreator" runat="server" CssClass="clicknext"></asp:CheckBox></FooterTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Read" ItemStyle-HorizontalAlign="Center" FooterStyle-HorizontalAlign="Center">
            <ItemTemplate><asp:CheckBox ID="cbTickViewer" runat="server" Checked='<%# Eval("TickViewer") %>'></asp:CheckBox></ItemTemplate>
            <FooterTemplate><asp:CheckBox ID="cbFooterTickViewer" runat="server"></asp:CheckBox></FooterTemplate>
        </asp:TemplateField>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:LinkButton ID="btnSave" runat="server" Text="<i class='fa fa-floppy-o'></i>" OnClick="btnSave_Click" CommandArgument='<%# Eval("ID")%>'/>
            </ItemTemplate>
            <FooterTemplate>
                <asp:LinkButton ID="btnAdd" runat="server" Text="<i class='fa fa-plus'></i> Hinzufügen" OnClick="btnAdd_Click" />
            </FooterTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

My goal is to automatically check and disable the Read-Checkbox, when the Create-Checkbox is clicked. Therefore I was able to create the following script:

<script>
    document.getElementById('Form').addEventListener('click', function (e) {
        if (e.target.parentElement.getAttribute("class") === 'clicknext') {
            if (jQuery(e.target).is(":checked")) {
                e.target.parentElement.parentElement.nextElementSibling.firstChild.setAttribute("checked", "checked");
                e.target.parentElement.parentElement.nextElementSibling.firstChild.setAttribute("disabled", "disabled");
            }
            else {
                e.target.parentElement.parentElement.nextElementSibling.firstChild.removeAttribute("checked");
                e.target.parentElement.parentElement.nextElementSibling.firstChild.removeAttribute("disabled");
            }
        }
    });
</script>

You may wonder why I was using .parentElement twice. This is because ASP.net will wrap a span around the checkbox, if you apply a css-class on it.

So the script works like a charm if i open the containing page and click the "Create"-Checkbox: The "Read"-Checkbox gets checked too and will be disabled. Unchecking the "Create"-Checkbox also works fine: The "Read"-Checkbox gets unchecked and reenabled.

BUT: As soon as I've checked or unchecked the "Read"-Checkbox manually once, the script won't work anymore. It's still able to enable/disable the "Read"-Checkbox and also sets the checked-attribute (seen over development-console), but the browsers (Firefox, Chrome) will not render it as checked.

Do you have any idea, what I'm doing wrong here? Thanks in advance!

Checkbox show img

I'm trying to make it so, when you checked/uncheck a checkbox, the img appears/disappears. As of now, when I checked a box, all 4 of the images appear instead of just the one. Also I was wondering is it wrong to use document.ready multiple times? This is what I have:

  Js:
    $(document).ready
    (
    function() 
    {
        $("#pump").hide();
        $("input:checkbox").change(function() {
         this.checked?$("#pump").show():$("#pump").hide();
        });
    });

    $(document).ready
    (
    function() 
    {
        $("#ski").hide();
        $("input:checkbox").change(function() {
         this.checked?$("#ski").show():$("#ski").hide();
        });
    });

    $(document).ready
    (
    function() 
    {
        $("#ship").hide();
        $("input:checkbox").change(function() {
         this.checked?$("#ship").show():$("#ship").hide();
        });
    });

    $(document).ready
    (
    function() 
    {
        $("#sun").hide();
        $("input:checkbox").change(function(){
         this.checked?$("#sun").show():$("#sun").hide();
        });
    });

                                 Html:
                                <div>
                <input type="checkbox"></input>
                <label> Pumpkins </label>
                <img src="images/pumpkins.jpg" id="pump">

                <input type="checkbox"></input>
                <label> Ski Resort </label>
                <img src="images/ski resort.jpg" id="ski">

                <input type="checkbox"></input>
                <label> Bahamas </label>
                <img src="images/bahamas.jpg" id="sun">

                <input type="checkbox"></input>
                <label> Cruise </label>
                <img src="images/cruise.jpg" id="ship">

            </div>