Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery select multiple attributes and check/uncheck another checkbox

Tags:

jquery

How I can identify following checkboxes in different rows and check/uncheck them separately.

<input type="checkbox" value="F" name="eph-ds[2457][]">
<input type="checkbox" value="PR" name="eph-ds[2457][]">
<input type="checkbox" value="DPH" name="eph-ds[2457][]">
<input type="checkbox" value="F" name="eph-ds[2450][]">
<input type="checkbox" value="PR" name="eph-ds[2450][]">
<input type="checkbox" value="DPH" name="eph-ds[2450][]">

where [number] is dinamically created.

Example: If "F" is checked, uncheck "PR". If "PR" is checked, uncheck "F". If "DPH" is checked, uncheck all.

    $(":checkbox").change(function() {
    var current = this.value;
    if (current == "F") {
$(":checkbox[value=PR]").prop("checked", false);
    } 
        if (current == "PR") {
$(":checkbox[value=F]").prop("checked", false);

    } 
  if (current == "DPH") {
$(":checkbox[value=F]").prop("checked", false);
$(":checkbox[value=PR]").prop("checked", false);

    } 
});

This code is working, but if I deselect checkbox in the second row, then checkbox in first row will be unchecked too:

enter image description here

like image 711
Adrian Avatar asked Jan 07 '14 22:01

Adrian


People also ask

How do you check a checkbox if another checkbox is checked?

Use change() function to detect when first checkbox checked or unchecked then change the checked state for second checkbox using prop().

How can I uncheck checkbox is checked in jQuery?

By using jQuery function prop() you can dynamically add this attribute or if present we can change its value i.e. checked=true to make the checkbox checked and checked=false to mark the checkbox unchecked.

How do you uncheck a checkbox when another is checked in react?

Here's one approach: import React from "react"; import ReactDOM from "react-dom"; class App extends React. Component { // some example state state = { a: { curr: false, prev: false, disabled: false }, b: { curr: false, prev: false, disabled: false }, c: false }; toggleOthers = () => { if (this.


1 Answers

This will do what you have requested:

jsFiddle Working Example

var $this,num,val;

$('input[name^="eph-ds["]').click(function() {
    $this = $(this);
    num = $this.attr('name').split('[')[1].replace("]", "");
    val = $this.val();
    if (val=="F"){
        $('input:checkbox[name="eph-ds['+num+'][]"][value="PR"]').prop('checked',false);
    }else if (val=="PR"){
        $('input:checkbox[name="eph-ds['+num+'][]"][value="F"]').prop('checked',false);
    }else if (val=="DPH"){
        $('input:checkbox[name="eph-ds['+num+'][]"]').not($this).prop('checked',false);
    }
});

Notes:

  1. Variables declared at top so they need not be re-declared with each checkbox click

  2. jsFiddle adds disabling F and PR when DPH is checked (otherwise after checking the DPH box user can THEN check either PR or F).

  3. Not necessary to query your checkboxes as groups (as suggested by previous responder)

  4. If difficult to follow, this line can be broken up into three lines:
    num = $this.attr('name').split('[')[1].replace("]", "");

name = $this.attr('name'); //returns eph-ds[####][]
temp = name.split('[')[1]; //returns ####]
num = temp.replace("]", ""); //removes trailing ]

like image 135
cssyphus Avatar answered Oct 08 '22 05:10

cssyphus